• home > webfront > ECMAS > vue >

    Vue Router(0):params和query的区别+重定向参数转发+别名作用

    Author:zhoulujun Date:

    本篇总结下 Vue Router传参 params和query的区别,以及重定向时候,参数如何转发。项目改版后,重构了路由,新旧系统如何重定向。

    vue 路由传参,有query、params+动态路由传参。

    官方文档有介绍:https://router.vuejs.org/zh/guide/essentials/passing-props.html

    传参与用法其实差不多

    // 路由设置
    router = { path: '/detail/:name/:code', name: 'detail',component:DetailComp}
    // 路由跳转
    this.$router.push({
        path:"/detail",
        params:{name:'name1',code:1001},
        query:{name:'name2',code:1002}});
    // url路径:index.html#/detail/name1/1001?name=name2&code=1002
    // 参数获取
    this.$route.query.name
    this.$route.params.name

    下面总结下

    params和query的区别

    网上说,

    • query 得写法是 用 path 来编写传参地址,而 params 得写法是用 name 来编写传参地址

      • 其实,这个并不是区别。二者都可以使用path 或者name 来传参。

    • query 在刷新页面得时候参数不会消失,而 params 刷新页面得时候会参数消失,可以考虑本地存储解决

    • query 传得参数都是显示在url 地址栏当中,而 params 传参不会显示在地址栏

      • parmas 可以在路由声明(如:path /:id),则在路径上,刷新并不会消失

    • query传参,在路径上,和url search 参数 parmas 一样的。刷新页面,query参数不会丢失。query参数缺失,页面也会正常展示。

      query方式生成的url为/xx?id=id,params方式生成的url为xx/id

    • params传参,如果路由没有声明(path /:id),刷新页面,参数就会丢失。在路径上声明的参数缺失,则不会调整到该路由。

      params方式需要注意的是需要定义路由信息如:path: '/xx/:id',这样才能进行携带参数跳转,否则url不会进行变化,并且再次刷新页面后参数会读取不到

    Vue router 重定向

    官方其实说得比较清楚了:https://learn-vue.gitbook.io/vue-router/redirect-and-alias

    重定向的三种方式:

    • 重定向至具体的路由:{ path: '/redirect-with-params/:id', redirect: '/with-params/:id'},如:{ path: '*', redirect: '/home' }

    • 重定向至命名路由:{ path: '/a', redirect: { name: 'foo' } }

    • 动态返回重定向目标:{ path: '/a', redirect: to => { // 方法接收 目标路由 作为参数 // return 重定向的 字符串路径/路径对象 }}

    注意导航守卫并没有应用在跳转路由上,而仅仅应用在其目标上。在下面这个例子中,为 /a 路由添加一个 beforeEnter 守卫并不会有任何效果。

    Vue router 别名

    • “重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么“别名”又是什么呢?

    • /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

    const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] })

    其实,这个并没有啥的好讲的。

    讲一下应用场景吧,如:我们项目重构的时候,路由也重构了,那么如何重定向到原来的页面呢?

    重定向值命名路由即可。老路由,转换:

    function redirectPath (routes) {
      return childrens.map(item => {
        let data = {
          path: item.path,
          redirect: { name: item.name }
        }
        if (item.children) {
          data.children = redirectPath(item.children)
        }
        return data
      })
    }

    替换原来路由即可。


    转载本站文章《Vue Router(0):params和query的区别+重定向参数转发+别名作用》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8578.html