在vue-router路由中，传参方式一般分两种：


利用$route.query对象的Get方式传参，与http的get方式一样，会将参数暴露到地址栏，使用方式如下：
路由请求发起(编程式导航)：
this.$router.push({path:'/selectById', query: {id: this.id}});
参数接收：

{{this.$route.query.searchBody}}


另一种是利用$route.params对象的Post方式传参，该方式具有一定限制，必须通过路径传参方式。

路由配置（根组件的路由配置js，若是vue-cli构建则为src/router/index.js）:
import Vue from 'vue'
import Router from 'vue-router'
import User from '@/components/User'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: 'index'
    },
    {
      path: '/selectById/:id',
      component: User
    }
  ]
})
路由请求发起：

this.$router.push({path:'/selectById', params: {id: this.id}});
参数接收：
{{this.$route.params.searchBody}}

以上是常用的两种router传参方式，特别需要注意如果params不通过路径地址传参的话是取不到值的。

vue路由高亮的两种方式
 
1.第一种使用mui
 
 如果每一个tab中有mui-active这个类此时tab就会高亮，如果不写mui-active这个类的话，默认有router-link-active这个类，我们还需要自己在这个类中写高亮样式，已经有现成的高亮类mui-active，所以解决方法为：在路由中实现
 
第二种方式：判断路径，如果此时在首页，首页的路径为/msite，判断是不是和当前路径相同，如果相同，则高亮类 guide-item  生效。
 ：class="{on: ‘/msite === $route.path’}"
 

 
Vue中的两种路由方式
 
给定初始页面
One页面
  
一、query+path
二、params+name
总结

 
给定初始页面
 
One页面
 
 
 
一、query+path
 
传参形式为：url?id=1001&name=Brave-Y
 
<template>
  <div>我是one页面，点击跳转<button @click="gotwo">去two</button></div>
</template>
<script>
export default {
  name: 'one',
  methods: {
    gotwo () {
    // 1.query+path
    // url?id=1001&name=Brave-Y
      this.$router.push({
        path: '/two',
        query: {
          id: 1001,
          name: 'Brave-Y'
        }
      })
    }
  }
}
</script>

 

 
 
二、params+name
 
地址栏无参数
 
<template>
  <div>我是one页面，点击跳转<button @click="gotwo">去two</button></div>
</template>
<script>
export default {
  name: 'one',
  methods: {
    gotwo () {
      // 2.params+name
      this.$router.push({
        name: 'two',
        params: {
          id: 1001,
          name: 'Brave-Y'
        }
      })
    }
  }
}
</script>
 
在路由文件中给T模块加一个name，可以给路由绑定值
 
  {
    name: 'two',
    path: '/two',
    // path: '/two/:id',
    component: Two
  },
 
 
 

 1.query+path
 
<template>
  <div>我是two页面，我收到了：{{$route.query.name}}发过来的id：{{$route.query.id}}</div>
</template>
 
2.params+name
 
<template>
  <div>我是two页面，我收到了：{{$route.params.name}}发过来的id：{{$route.params.id}}</div>
</template>
 
总结
 
对比看一下两种页面跳转时的地址栏参数，使用query+path路由方式，在地址栏时可以看到请求参数，这一点和Get请求很类似，如果使用params+name路由方式，并且不在路由文件中绑定值，在地址栏上也不会有请求参数

目录
 
1、动态路由
 
1、配置router
 
2、使用路由
 
3、创造用户组件并使用传进来的用户信息
 
2、路由懒加载
 
1、懒加载的方式
 
2、懒加载举例
 

1、动态路由（通过$route.params获得数据）
 
某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/aaaa或/user/bbbb。p除了有前面的/user之外，后面还跟上了用户的ID。这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。
 
1、配置router
 
 
 
 
 
2、使用路由
 
 
 
1、用组件传递
 
 
 
 
 
 
2、用函数代码传递
 
 
 
 
3、创造用户组件并使用传进来的用户信息
 
 
 
 
 
在compute中用this.$route.params.userId，但是mustache语法中直接$route.params.userId
 
 
参考上面的message就是这样的
 
 
2、路由懒加载
 
1、懒加载的方式
 
 
 
 
 
2、懒加载举例
 
 
 
路由懒加载前
 
 
 
 
 
 
路由懒加载后（打包后的js分成了多个部分，懒加载了Home和About其实就是把Home和About分成了另外两个js，当需要的时候才加载。）
 
 
 
 
 
 
参考视频：
 
https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162