Vue-router的传参和跳转及高级使用

 

 

 第一种采用params传参的方式：

 

 第二种采用query传参的方式：

 

 params传参和query传参的区别：

★但是采用params的方式一刷新值就消失了 */

/* 用params传值 只能采用name的方式 不能采用path否则id就传不过去 */

  /* params传参 参数是不会在地址栏展示出来 */

/* 采用query传参的方式比params好在，刷新之后值不会消失 */

  /* query传参可以使用path的方式而params不可以 */

/* 使用query传参 参数是会在地址栏上明文展示出来 */

 

路由的返回上一页、跳转下一页、刷新和替换当前页

vue-ruter的高级使用

第一种使用二级路由的方式

 

 使用默认二级路由的第二种方式：

 通过动态路由传参的两种方式：

第一种方式：

 

 第二种方式：

 使用监听器 实时监听路由的变化：

动态添加路由，实现菜单栏变化

父组件把值传给菜单栏组件

 菜单栏组件拿到值渲染：

使用事件总线方式传值：

再父页面接收 将要被改变的 路由数组

在my页面点击添加路由按钮实现添加：

全局路由守卫：

 局部路由钩子函数 只针对当前的路由的：

 组件内的路由钩子函数：有三个

 组件内路由更新的实战运用：

 组件内路由离开时候的实战运用：

 在组件路由进入组件的获取vue实例化对象：

 路由元信息：

 

动态路由的添加：

/* 动态路由添加 */

addRouteFn(){

console.log(this.$router)

      this.$router.addRoute('Home',{

        path: 'treepage',

        name: 'TreePage',

        component: () => import('../views/TreePage.vue'),

        meta:{

          name:"权限树",

          keepAlive:true,

          icon:"el-icon-umbrella"

        }

      })

      this.fullRouteArr.push({

        name:'权限树',

        icon:"el-icon-umbrella",

        path:'/home/treepage',

      });

    },