Vue实现简单路由跳转

拼搏现实的明天。 2022-01-11 05:25 360阅读 0赞

##### 1. 新建一个项目 #####

--------------------

##### 2. 在components中新建一个文件 这里是test1.vue，内容如下 #####

--------------------

<template>
        <div>this is 2</div>
    </template>
    <script>
    export default {
        name:'test1'
    }
    </script>

##### 3. 在router—>index.js中注册 test1.vue组件 --内容如下（整个文件） #####

--------------------

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import test1 from '@/components/test1'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },{
          path: '/to2',
          name: 'test1',
          component: test1
      }
    
      ]
    })

##### 4. 清空HelloWorld.vue文件原内容，输入如下内容 #####

--------------------

<template>
     <div>
      this is 1
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld'
    }
    </script>

#####  效果图 #####

--------------------

## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70] ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]: /images/20220111/dfde23f34f6942559e4d30d277df737f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 44 阅读

相关 vue router实现路由跳转方法

![08e886e37a144a44b1d7d7c26d0864ff.jpeg][] 今天在学习 vue的过程中，看到了 vue的 router，用它来实现路由跳转，非常方便

雨点打透心脏的1/2处/ 2023年10月11日 23:04/ 0 赞/ 22 阅读

相关【Vue基础】Vue路由，实现页面跳转

一、需求说明点击不同的模块实现页面跳转，如下点击“员工管理”右侧会显示员工管理页面，如下图1；点击“入住信息”右侧会显示入住信息，如下图二 ![7cf2eb2df4a64

偏执的太偏执、/ 2023年10月11日 22:04/ 0 赞/ 77 阅读

相关 vue中的路由跳转方法，详细（vue路由跳转）

简述：Vue路由可以帮助你在单页应用中管理应用的不同页面和页面间的跳转，通过Vue路由，你可以实现页面的动态切换和无刷新加载，提升用户体验和页面性能，今天就来分享下Vue中路

痛定思痛。/ 2023年10月02日 23:42/ 0 赞/ 21 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 295 阅读

相关 vue-router实现路由跳转

用了一个多月的vue了，发现路由跳转的方式还挺多，现在上干货： 1.返回上个页面(不带参数) this.$router.go(-1); 2.指定跳转的地址(不带参

港控/mmm°/ 2022年05月17日 21:26/ 0 赞/ 381 阅读

相关 Vue简单项目中的路由跳转

最近跟着视频在做一个vue的小项目，其中的路由跳转跟我之前学习的router跳转有所不同。此方法简洁明了，所以想把记下来，方便以后的学习。之前学习的rou

绝地灬酷狼/ 2022年02月16日 03:21/ 0 赞/ 332 阅读

相关 Vue实现简单路由跳转

1. 新建一个项目 -------------------- 2. 在components中新建一个文件这里是test1.vue，内容如下 ----------

拼搏现实的明天。/ 2022年01月11日 05:25/ 0 赞/ 361 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 531 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 502 阅读