动态路由

前端小帅帅
279 阅读1分钟

一：传参

-1 to：字符串方式传参 使用query方式接收参数

image.png

1:获取参数：使用this.$route.query.您传的参数名字 比如这个是name 通过传过来的参数 可以进行判断 2种方式 image.png

image.png 还有to的对象方式传参

image.png

-2 动态路由方式传参 第二种方式直接props：true 然后页面写props：【‘id’】此方式 接收参数时候直接this.id 不需要使用$route的属性方法了

image.png

image.png

image.png

-3 使用params方式接收参数

image.png

image.png

image.png

二：跳转

image.png 页面多次跳转防止报错 在router的index.js下面配置这一句话

   `const VueRouterPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push (to) {
      return VueRouterPush.call(this, to).catch(err => err)
    }`
    
复制代码

三 添加路由

  • 添加一级路由 写一个按钮 写一个方法 在执行方法里面添加路由的跳转路由 跟在index。js中添加路由的方式一样
  • addRoute（）这个是添加路由的方法

image.png

  • 添加二级路由 有二个参数 第一个是你要在那个路由里面要添加二级路由，是一级路由的name的值 第二个参数就是路由的路径

image.png

四 路由的全局守卫和局部守卫 钩子函数都是在router的index.js页面配置

  • 全局路由守卫

image.png

  • 监听全局路由离开触发的钩子函数 没有next（）函数方法

image.png

  • 局部路由守卫 在路由下面里面写 注意：如果同一个路径下，动态参数的不同，那么触发局部路由也只会触发一次

image.png

五 ￥route和￥router区别

  • ￥route是路由的属性。可以获取路由的对象属性信息 比如query params
  • ￥router 是路由对象实例化对象 听一些方法 比如addRouter
avatar
文章
阅读
粉丝