路由传参中的跳转失败的问题

获取参数的两种常用方法：params和query

       两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏。需要注意的是接收参数的时候是route而不是router。两种方式一一对应，名字不能混用。

      由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面及通过路由配置的name属性访问。

this.$router.push({name:'Home',params:{data:this.roleName}});

export default {
  name: "Home",
  data() {
    return {
      // 左侧菜单数据
      menuList: [],
      roleName: this.$route.params.data,

在点击登录时，会发现页面没有进行跳转，而且地址也没有发生变化。

检查后发现是路由配置的问题：

 path: '/home/:data',
    name: 'Home',

 要在path中加上'/:data'，因为这种方式将参数放在url上，刷新的时候才不会丢失数据。

这是params导致的参数数据丢失。如果不配置参数，页面刷新就会丢失参数导致跳转失败。