前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。
参考官网：https://router.vuejs.org/zh/guide/essentials/navigation.html
params传参（url中显示参数）
- 文件结构
- 定义路由：在定义path路由路径时定义参数名和格式，如 path: “/one/login/:num” ，router>index.js文件如下
/* eslint-disable*/ //第一步：引用vue和vue-router ，Vue.use（VueRouter） import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) //第二步：引用定义好的路由组件 import ChildOne from '../components/childOne' import ChildTwo from '../components/childTwo' import Log from '../components/log.vue' import Reg from '../components/reg.vue' //第三步：定义路由（路由对象包含路由名、路径、组件、参数、子路由等），每一个路由映射到一个组件 //第四步：通过new Router来创建router实例 export default new Router({ mode: 'history', routes: [ { path: '/one', name: 'ChildOne', component: ChildOne, children:[ { path:'/one/log/:num', component:Log, }, { path:'/one/reg/:num', component:Reg, }, ], }, { path: '/two', name: 'ChildTwo', component: ChildTwo } ] })- 在父路由组件上使用router-link进行路由导航，传参用
的形式向子路由组件传递参数。使用router-view进行子路由页面内容渲染，父路由组件childOne.vue 如下：
这是父路由childOne对应的组件页面
下面可以点击显示嵌套的子路由
显示登录页面
显示注册页面
- 子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数，子路由组件login.vue如下：
登录界面：这是另一个嵌套路由的内容
{
{this.$route.params.num}}
效果：
注意：如上所述路由定义的path: “/one/login/:num”路径和to=”/one/login/001″必须书写正确，否则不断点击切换路由，会因为不断将传递的值显示添加到url中导致路由出错，如下
传递的值存在url中存在安全风险，为防止用户修改，另一种方式不在url中显示传递的值
params传参（url中不显示参数）
- 定义路由时添加name属性给映射的路径取一个别名，router>index.js文件修改router如下：
export default new Router({ mode: 'history', routes: [ { path: '/one', name: 'ChildOne', component: ChildOne, children:[ { path:'/one/log/', name:'Log', component:Log, }, { path:'/one/reg/', name:'Reg', component:Reg, }, ], }, { path: '/two', name: 'ChildTwo', component: ChildTwo } ] })- 在父路由组件上使用router-link进行路由导航，使用
下面可以点击显示嵌套的子路由
显示登录页面 显示注册页面 - 子路由组件页面获取父路由传参方式不变，reg.vue 文件如下：
登录界面：这是另一个嵌套路由的内容
子路由获取的参数：{ {this.$route.params.num}}
注意：上述这种利用params不显示url传参的方式会导致在刷新页面的时候，传递的值会丢失；
使用Query实现路由传参
- 定义路由 router>index.js文件如下：
export default new Router({ mode: 'history', routes: [ { path: '/one', name: 'ChildOne', component: ChildOne, children:[ { path:'/one/log/', component:Log, }, { path:'/one/reg/', component:Reg, }, ], }, { path: '/two', name: 'ChildTwo', component: ChildTwo } ] })- 修改路由导航
，
这是父路由childOne对应的组件页面
下面可以点击显示嵌套的子路由
显示登录页面 显示注册页面 - 子路由组件通过 this.$route.query.num 来显示传递过来的参数，reg.vue 文件如下：
注册界面：这是二级路由页面
{ {this.$route.query.num}}
PS: 在第一步的定义路由中我们都使用了mode：history 作用就是去除路由跳转时路由路径前的 “#”
常用的mode模式有两种：
默认为hash模式，最明显的标志是，URL上有#号 localhost:8080/#/，路由会监听#后面的信息变化进行路由匹配
另一种为history模式，不会有#出现，很大程度上对URL进行了美化。需要注意history模式在打包后的路由跳转需要服务器配合
默认不使用mode：history 如下
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/204208.html原文链接：https://javaforall.net
