Vue Router(0)：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