Vue Router路由导航及传参方式
Vue Router路由导航及传参方式 
  1. <router-link :to="...">
  1. router.push(...)
  1. // 字符串
  2. router.push('home')
  1. // 对象
  2. router.push({ path: 'home' })
  1. //浏览器地址栏中显示参数和不显示参数两种情况主要就是看路由配置
  3. //显示参数的配置
  4. {
  5.    name: "user",
  6.    path: "/user:userId",
  7.    component: Detail
  8. }
  9. // 命名的路由
  10. // params相当与发送了一次post请求，请求参数会显示在浏览器地址栏中，并且刷新页面之后参数不会消失
  11. router.push({ name: 'user', params: { userId: '123' }})
  13. //不显示参数的配置
  14. {
  15.    name: "user",
  16.    path: "/user",
  17.    component: Detail
  18. }
  19. // 命名的路由
  20. // params相当与发送了一次post请求，请求参数不会显示在浏览器地址栏中，并且刷新页面之后参数会消失
  21. router.push({ name: 'user', params: { userId: '123' }})
  23. //统一接收参数方式
  24. this.$route.params.userId
  1. // 带查询参数，变成 /register?plan=private
  2. // query相当与发送了一次get请求，请求参数会显示在浏览器地址栏中
  3. router.push({ path: 'register', query: { plan: 'private' }})
  5. //接收参数方式
  6. this.$route.query.plan
  1. const userId = '123'
  2. router.push({ name: 'user', params: { userId }})     // -> /user/123
  3. router.push({ path: `/user/${userId}` })             // -> /user/123
  4. // 这里的 params 不生效!!
  5. router.push({ path: '/user', params: { userId }})    // -> /user

规则与编程式导航相同，只是写法不同，简单介绍

  1. //params传参
  2. <router-link :to="{ name: 'user', params: { userId: '123' }}">click to news page</router-link>
  3. //接收参数方式
  4. this.$route.params.userId
  6. //query传参
  7. <router-link :to="{ path: 'register', query: { plan: 'private' }}">click to news page</router-link>
  8. //接收参数方式
  9. this.$route.query.plan

版权声明：本文为zhao-menglin原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zhao-menglin/p/zhaomenglin.html