Vue路由传参的几种方式

时间：2023-03-09 02:06:39
Vue路由传参的几种方式
原

Vue路由传参的几种方式

2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613

前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。

参考官网：https://router.vuejs.org/zh/guide/essentials/navigation.html

params传参（url中显示参数）

  • 文件结构

Vue路由传参的几种方式

  • 定义路由：在定义path路由路径时定义参数名和格式，如  path: "/one/login/:num" ，router>index.js文件如下
  1. /* eslint-disable*/
  3. //第一步：引用vue和vue-router ，Vue.use（VueRouter）
  4. import Vue from 'vue'
  5. import Router from 'vue-router'
  6. Vue.use(Router)
  8. //第二步：引用定义好的路由组件
  9. import ChildOne from '../components/childOne'
  10. import ChildTwo from '../components/childTwo'
  11. import Log from '../components/log.vue'
  12. import Reg from '../components/reg.vue'
  14. //第三步：定义路由（路由对象包含路由名、路径、组件、参数、子路由等），每一个路由映射到一个组件
  15. //第四步：通过new Router来创建router实例
  16. export default new Router({
  17. mode: 'history',
  18. routes: [
  19. {
  20. path: '/one',
  21. name: 'ChildOne',
  22. component: ChildOne,
  23. children:[
  24. {
  25. path:'/one/log/:num',
  26. component:Log,
  27. },
  28. {
  29. path:'/one/reg/:num',
  30. component:Reg,
  31. },
  32. ],
  33. },
  34. {
  35. path: '/two',
  36. name: 'ChildTwo',
  37. component: ChildTwo
  38. }
  39. ]
  40. })
  • 在父路由组件上使用router-link进行路由导航，传参用<router-link to="/one/login/001">的形式向子路由组件传递参数。使用router-view进行子路由页面内容渲染，父路由组件childOne.vue 如下：
  1. <template>
  2. <div style="border:1px solid red;color:red;">
  3. <p>这是父路由childOne对应的组件页面</p>
  4. <p>下面可以点击显示嵌套的子路由 </p>
  5. <router-link to="/one/log/123">显示登录页面</router-link>
  6. <router-link to="/one/reg/002">显示注册页面</router-link>
  7. <router-view></router-view>
  8. </div>
  9. </template>
  • 子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数，子路由组件login.vue如下：
  1. <template>
  2. <div style="border:1px solid orange;color:orange;">
  3. <p>登录界面：这是另一个嵌套路由的内容</p>
  4. <h3>{{this.$route.params.num}}</h3>
  5. </div>
  6. </template>

效果：

Vue路由传参的几种方式

注意：如上所述路由定义的path: "/one/login/:num"路径和to="/one/login/001"必须书写正确，否则不断点击切换路由，会因为不断将传递的值显示添加到url中导致路由出错，如下

Vue路由传参的几种方式

传递的值存在url中存在安全风险，为防止用户修改，另一种方式不在url中显示传递的值

params传参（url中不显示参数）

  • 定义路由时添加name属性给映射的路径取一个别名，router>index.js文件修改router如下：
  1. export default new Router({
  2. mode: 'history',
  3. routes: [
  4. {
  5. path: '/one',
  6. name: 'ChildOne',
  7. component: ChildOne,
  8. children:[
  9. {
  10. path:'/one/log/',
  11. name:'Log',
  12. component:Log,
  13. },
  14. {
  15. path:'/one/reg/',
  16. name:'Reg',
  17. component:Reg,
  18. },
  19. ],
  20. },
  21. {
  22. path: '/two',
  23. name: 'ChildTwo',
  24. component: ChildTwo
  25. }
  26. ]
  27. })
  • 在父路由组件上使用router-link进行路由导航，使用   <router-link :to="{name:'home',params:{id:001}}>    形式传递参数。注意   ': to= ' 前面的冒号，childOne.vue组件修改如下：
  1. <template>
  2. <div style="border:1px solid red;color:red;">
  3. <p>这是父路由childOne对应的组件页面</p>
  4. <p>下面可以点击显示嵌套的子路由 </p>
  5. <router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>
  6. <router-link :to="{name:'Reg',params:{num:888}}">显示注册页面</router-link>
  7. <router-view></router-view>
  8. </div>
  9. </template>
  • 子路由组件页面获取父路由传参方式不变，reg.vue 文件如下：
  1. <template>
  2. <div style="border:1px solid orange;color:orange;">
  3. <p>登录界面：这是另一个嵌套路由的内容</p>
  4. <h3>子路由获取的参数：{{this.$route.params.num}}</h3>
  5. </div>
  6. </template>

注意：上述这种利用params不显示url传参的方式会导致在刷新页面的时候，传递的值会丢失；

使用Query实现路由传参

  • 定义路由 router>index.js文件如下：
  1. export default new Router({
  2. mode: 'history',
  3. routes: [
  4. {
  5. path: '/one',
  6. name: 'ChildOne',
  7. component: ChildOne,
  8. children:[
  9. {
  10. path:'/one/log/',
  11. component:Log,
  12. },
  13. {
  14. path:'/one/reg/',
  15. component:Reg,
  16. },
  17. ],
  18. },
  19. {
  20. path: '/two',
  21. name: 'ChildTwo',
  22. component: ChildTwo
  23. }
  24. ]
  25. })
  • 修改路由导航 <router-link :to="{path:'/one/log',query:{num:123}}"> ，childOne.vue 文件修改如下：
  1. <template>
  2. <div style="border:1px solid red;color:red;">
  3. <p>这是父路由childOne对应的组件页面</p>
  4. <p>下面可以点击显示嵌套的子路由 </p>
  5. <router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>
  6. <router-link :to="{path:'/one/reg',query:{num:999}}">显示注册页面</router-link>
  7. <router-view></router-view>
  8. </div>
  9. </template>
  • 子路由组件通过 this.$route.query.num 来显示传递过来的参数，reg.vue 文件如下：
  1. <template>
  2. <div style="border:1px solid purple;color:purple;">
  3. <p>注册界面：这是二级路由页面</p>
  4. <h3>{{this.$route.query.num}}</h3>
  5. </div>
  6. </template>

效果如下：
Vue路由传参的几种方式

PS: 在第一步的定义路由中我们都使用了mode：history 作用就是去除路由跳转时路由路径前的 “#”

常用的mode模式有两种：

默认为hash模式，最明显的标志是，URL上有#号 localhost:8080/#/，路由会监听#后面的信息变化进行路由匹配

另一种为history模式，不会有#出现，很大程度上对URL进行了美化。需要**注意**history模式在打包后的路由跳转需要服务器配合

默认不使用mode：history 如下

Vue路由传参的几种方式

相关文章