vue嵌套路由传递参数_Vue路由传参的几种方式

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

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进行路由导航，使用   

这是父路由childOne对应的组件页面

下面可以点击显示嵌套的子路由

显示登录页面

显示注册页面