Vue中路由相关的知识

demo项目的地址：https://github.com/yindong999/Vue-demo

1，基础的路由配置：

在router文件夹下面的index.js文件中，将路由配置的routes数组中；

    在页面使用路由时，用router-link标签配合router-view标签来实现页面跳转（如下图），router-link在页面渲染后将变成a标签，是页面跳转的桥梁，router-view用于显示页面；

这里对路由切换时添加了切换效果，用了transition标签将router-view包裹起来了，具体方法参考地址：https://blog.csdn.net/yinge0508/article/details/103957515

2，动态路由（单段路径参数）

// 路由配置  
{
    name:'dancanshu',
    path: '/user/:id',
    component: () => import('../views/more.vue')
  }, 

可以匹配的路径有 '/user/more', '/user/more2' 

 <router-link to="/user/more">more1</router-link> | 
 <router-link to="/user/more2">more2</router-link> | 

可以在more.vue页面中 获取id，如下图：

3,动态路由（多段路径参数）

 {
    name:'duocanshu',
    path: '/user/:username/even/:password',
    component: () => import('../views/msg.vue')
  } 

可以匹配的路径有：

    <router-link to="/user/zhagnsan/even/123">张三</router-link> | 
    <router-link to="/user/lisi/even/456">李四</router-link> | 

同样的在对应页面可以获取传递的参数：

4，经常在方法中用的路由跳转就可以用this.$router.push

，如下图所示； query传参时针对path的，params传参时针对name的，接收参数的方式都差不多。。在方法中是  this.$route.query. 和this.$route.params.      在div标签中  {{$route.query. }} 和 {{$route.params.  }}

 上图中要跳转的页面，路由也要配置好，配置如下：

  {  name:'user',   path:'/user',  component: () => import('../views/user.vue') } ,
  {   name:'user2',   path:'/user2',  component: () => import('../views/user.vue')  } 

配置好以后，在对应的页面可以获取传递的参数，如下图所示：

 

5，$router和$route的区别？

$router为VueRouter的实例，相当于一个全局的路由器对象；也可以获取当前的路由对象的相关信息；

$route相当于当前正在跳转的路由对象，可以获取name,path,query,params,fullPath等

6，响应路由参数的变化

当两个或多个路由都渲染同个组件时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用；

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象

  watch:{
       '$route' (to, from) {
      // 想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象
      console.log(to, from)
    }
  },

也可以使用 beforeRouteUpdate 导航守卫：（组件内的路由导航守卫：）

可以根据to和form中的相关信息进行操作，打印的信息如下：

7，匹配所有路由或者匹配以xxx开头的路由，

注意: path:'/my-*' 的路由匹配以 /my- 开头的路由； path:'*' 的路由匹配所有的路由，必须放在最后，

  {  name:'my', path:'/my-*', component: () => import('../views/my.vue') } ,
  {  name:'notFonud', path:'*',component: () => import('../views/404.vue')  } 

 8，嵌套路由