[vue]vue-router跳转用法详解

源码资源网

vue-router是一个单页面的路由器，也就是说所有的跳转都会在这个页面实现。

这种只需要跳转页面，不需要添加验证方法的情况，可以使用 <router-link> 来实现导航的功能：

1、简单的跳转。
①首先要安装vue-router，利用npm进行安装

npm install vue-router或者cnpm install vue-router

②进行引用，<router-link to="/user">user</router-link>  router-link指定路径，to指向所要跳转的url

                    <router-view></router-view>显示url的内容，也可写成<router-view/>

1. <template>
   
2.   <div class="hello">
   
3.           <h1>{{ msg }}</h1>
   
4.           <ul>
   
5.                 <li><router-link to="/about">{{about}}</router-link></li>
   
6.                 <li><router-link to="/home">{{home}}</router-link></li>
   
7.         </ul>
   
8.         <router-view></router-view>
   
9.   </div>
   
10. </template>

复制代码

②在component文件夹新建about.vue  home.vue文件，按照默认模版about.vue

1. <template>
   
2.         <div>
   
3.         <h1>{{msg}}</h1>
   
4.         <router-link to="/">返回</router-link>
   
5.         </div>
   
6. </template>
   
7. 
   
8. <script>
   
9.         export default { //ES6语法，用于输出到外部，这样就可以在其他文件内用import输入
   
10.           name: 'about',
    
11.           data () {    //由于是组件，data必须是个函数，这是ES6写法，data后面加括号相当于data: function () {}
    
12.             return {   //记得return不然接收不到数据
    
13.               msg: 'Welcome' //上面的 msg 就是这里输出的
    
14.             }
    
15.           }
    
16.         }
    
17. </script>
    
18. 
    
19. <style>
    
20. </style>
    

复制代码

home.vue

1. <template>
   
2.         <div>
   
3.         <h1>{{msg}}</h1>
   
4.         <router-link to="/">返回</router-link>
   
5.         <router-view></router-view>
   
6.         </div>
   
7. </template>
   
8. 
   
9. <script>
   
10.         export default { //ES6语法，用于输出到外部，这样就可以在其他文件内用import输入
    
11.           name: 'home',
    
12.           data () {    //由于是组件，data必须是个函数，这是ES6写法，data后面加括号相当于data: function () {}
    
13.             return {   //记得return不然接收不到数据
    
14.               msg: '一级路由内容 Welcome' //上面的 msg 就是这里输出的
    
15.             }
    
16.           }
    
17.         }
    
18. </script>
    
19. 
    
20. <style>
    
21. </style>
    

复制代码

③在src文件夹下新建一个router.js文件，进行配置引入vue和vue-router，切记要加上Vue.use(VueRouter)

1. import Vue from 'vue'
   
2. import VueRouter from 'vue-router'
   
3. 
   
4. import home from './components/home.vue'
   
5. import about from './components/about.vue'
   
6. 
   
7. Vue.use(VueRouter)

复制代码

引入你新建的about.vue  home.vue文件，配置路由，指定路由和组件之间的关系

1. const routes = [{
   
2.         path: '/home',
   
3.         component: home,
   
4.     },
   
5.     {
   
6.         path: '/about',
   
7.         component: about
   
8.     }
   
9. ]

复制代码

定义router，完整的router.js代码如下：

1. import Vue from 'vue'
   
2. import VueRouter from 'vue-router'
   
3. 
   
4. import home from './components/home.vue'
   
5. import about from './components/about.vue'
   
6. 
   
7. Vue.use(VueRouter)
   
8. 
   
9. const routes = [{
   
10.         path: '/home',
    
11.         component: home,
    
12.     },
    
13.     {
    
14.         path: '/about',
    
15.         component: about
    
16.     }
    
17. ]
    
18. 
    
19. var router = new VueRouter({
    
20.     mode: 'history',
    
21.     base: __dirname,
    
22.     routes
    
23. })
    
24. export default router

复制代码

重点或者易错点：export default router这句话要记得加上，不然会报下面的警告


④配置main.js，详细见下面代码

1. import Vue from 'vue'
   
2. import App from './App'
   
3. // 引入路由
   
4. import router from './router'
   
5. 
   
6. Vue.config.productionTip = false
   
7. 
   
8. new Vue({
   
9.         el: '#app',
   
10.     router,
    
11.     // 注入到根实例中
    
12.     components: { App },
    
13.     render: h => h(App)
    
14. }).$mount('#app')
    

复制代码

2、子路由的跳转

在1的基础，进行子路由的跳转，

①在home文件夹下新建两个vue文件，作为子路由所要展示的内容

②在router中配置子路由，在上一节点的内容加上子路由，利用chilren特性

1. const routes = [{
   
2.         path: '/home',
   
3.         component: home,
   
4.         children: [{
   
5.                 path: 'computer',
   
6.                 component: computer
   
7.             },
   
8.             {
   
9.                 path: 'phone',
   
10.                 component: phone
    
11.             }
    
12.         ]
    
13.     },
    
14.     {
    
15.         path: '/about',
    
16.         component: about
    
17.     }
    
18. ]

复制代码

③在父页面写上

<router-view></router-view>

以显示子页面的内容

上述示例代码全部在附件中，感兴趣的可以下载看一下。
代码采用HBuilderX生成的vue-cli项目，项目预览情况如下：



在IIS下部署，需要编译生成文件，生成命令

npm run build

详细VUE搭建IIS站点参见 windows下搭建vue开发环境+IIS部署



项目附件下载（附件项目中不包括依赖项）：

文件名称:vuetest22.rar 
下载次数:4  文件大小:259.1 KB  售价:15金钱 [记录]
下载权限: 不限 [购买VIP]   [充值]   [在线充值]   【VIP会员5折；永久VIP免费】

安全检测，请放心下载