vue路由基础篇--总结

1、安装与引用

使用npm 安装

npm install vue-router

与模块系统一起使用时，必须通过Vue.use()显式安装路由器在router/index.js文档中

import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '../store';

Vue.use(VueRouter);

2、应用

使用Vue+Vue Router创建单页面引用程序很简单，通过Vue.js，我们已经在使用组件组成应用程序，将Vue Router添加到混合中时，我们要做的就是将组件映射到路由，并让Vue Router知道在哪里渲染它们。
在html写

<div>
 <router-link to="/foo">Go to Foo</router-link>
 <router-view></router-view>
</div> 

在js中
在router/index.js中将组件映射到路由

const routes = [
    { path: '/', redirect: '/login'},
    {
      name:'home',
      path: '/home',
      component: () => import('@/components/home/Home'),
      children: [
        /* ---设备管理--- */
        {
          path: '/deviceList',
          name: 'deviceList',
          component: () => import('@/components/device/deviceList')
        },
        {
          path:"/deviceList/deviceDetail",
          name:"deviceDetail",
          meta:{activeMenu:'/deviceList'},
          title:"设备详情",
          component: () => import('@/components/device/deviceDetail')
        }
      ]
    }
];
const router = new VueRouter({ routes });

export default router;

然后在app.js中注入路由，我们可以访问它 this.$router以及this.$route 任何组件内部的当前路由

window.vm = new Vue({
    el: '#app',
    router
});

3、动态路由匹配

很多时候，我们需要将具备给定模式的不同路由映射到同一组件，例如：我们可能有一个user组件，要对应拥有不同的userId的user,在vue Router中我们可以使用到动态路由匹配

比如我们要做一个页面

/user/user1/profile                     /user/user2/posts
+------------------+                  +-----------------+
| User1             |                  | User2            |
| +------------- -+ |                  | +-------------+ |
| | table         | |  +------------>  | | |  table     | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

点击信号一和信号二的时候，下面的显示同一个组件，但是是不同的路由连接，这时候就尅用动态路由匹配

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { 
    	path: '/user/:UserId',  //1:用户一 2:用户二
    	name: 'user', 
    	props: true,
    	meta: {
            activeMenu: '/UserList'
          },
    	component:  () => import('@/components/user' ,
    	beforeEnter: (to, from, next) => {
            if (['1', '2'].includes(to.params.UserId)) {
              next()
            }
          }
    }
  ]
})

像这样的路由配置，就是/user/1和user/2都会匹配到同一个路由。
动态字段在：后面表示，当路由动态匹配的时候，动态字段的值将会通过this.$route.params访问到，

const User = {
  template: '<div>User {{ $route.params.UserId }}</div>'
}

此外我们也可以通过另外一种方式获取到
我们在组件注册的时候设置props：true
我们都知道这是父组件向子组件传参的方式，子组件在代码中设置

export default {
  props: {
    UserId : String
  },
}  

可以接收到userId进行使用，这也是获取动态路由参数的一种方式。

4、嵌套路由

真正的应用程序用户界面通常由嵌套在多个级别的组件组成。URL的段对应于嵌套组件的某种结构也是很常见的，例如：

/home/deviceList                       /home/userList
+-------------------------------------------------------+
| home                                  home            |
| +--------------+ |                  | +-------------+ |
| | deviceList   | |   <----------->  | | userList    | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+-------------------------------------------------------+

比如一个userList下面可以有addUser和addDevice

{
      name:'home',
      path: '/home',
      component: () => import('@/components/home/Home'),
      children: [
        /* ---设备管理--- */
        {
          path: '/deviceList',
          name: 'deviceList',
          component: () => import('@/components/device/deviceList')
        }
        /*用户管理*/
        {
          path: '/userList',
          name: 'userList',
          component: () => import('@/components/user/userList')
        },
     ]   
 }       

5、路由跳转的几种方式

1、**“<router-link to='path'></router-link>”’**

<router-link tag="li" replace to="/RTUDetail/1">控制指令</router-link>

2、router.push(location, onComplete?, onAbort?)

	goUserDetail(user){
         this.setTempData({userId:user.id}); //通常携带一些参数
         this.$router.push("/systemManage/user/userDetail");
     },

3、router.replace(location, onComplete?, onAbort?)
使用像router.push一样，唯一的区别是它导航时没有推送新的历史记录路由，也就是它替换了当前路由

<div v-if="noInit">
    <span>系统尚未进行初始化</span>
    <el-button type="primary" @click="$router.replace('/init')">立即初始化</el-button>
</div>

4、router.go(n)
此方法采用一个整数作为参数，该参数指示在历史记录堆栈中前进或后退多少步，类似于window.history.go(n)。

// go forward by one record, the same as history.forward()
router.go(1)

// go back by one record, the same as history.back()
router.go(-1)

// go forward by 3 records
router.go(3)

// fails silently if there aren't that many records.
router.go(-100)
router.go(100)

6、重定向与别名

重定向也在routes配置中完成。要从重定向/a到/b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向是指用户访问时/a，URL将被替换/b，然后与匹配/b
比如我们在路由刚开始的时候，定义自动跳转至login页面就可以用这个属性

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' }
  ]
})

比如我们到有tab页的页面的时候，默认显示第一个tab页

		{
          path: '/UserDetail',
          redirect: '/UserDetail/1'
        },

别名 /a as /b表示用户访问时/b，URL保持不变/b，但将被匹配，就像用户正在访问时一样/a。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

7、命名视图

命名视图平时很少用，主要作用是对于一块视图，需要显示不同的路由模块的时候，要给router-view写上name

8、路由传参

分为布尔模式、对象模式和函数模式

参考自：https://router.vuejs.org/zh/guide/