前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效。传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。
https://img-blog.csdn.net/20180728231122498?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70&ynotemdtimestamp=1630473687888
/* 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
}
]
})
<template>
<div style="border:1px solid red;color:red;">
<p>这是父路由childOne对应的组件页面</p>
<p>下面可以点击显示嵌套的子路由 </p>
<router-link to="/one/log/123">显示登录页面</router-link>
<router-link to="/one/reg/002">显示注册页面</router-link>
<router-view></router-view>
</div>
</template>
<template>
<div style="border:1px solid orange;color:orange;">
<p>登录界面:这是另一个嵌套路由的内容</p>
<h3>{{this.$route.params.num}}</h3>
</div>
</template>
效果:
https://img-blog.csdn.net/20180728225443654?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70&ynotemdtimestamp=1630473687888
注意:如上所述路由定义的path: "/one/login/:num"路径和to="/one/login/001"必须书写正确,否则不断点击切换路由,会因为不断将传递的值显示添加到url中导致路由出错,如下
https://img-blog.csdn.net/20180728225752580?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70&ynotemdtimestamp=1630473687888
传递的值存在url中存在安全风险,为防止用户修改,另一种方式不在url中显示传递的值
exportdefaultnewRouter({
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
}
]
})
<template>
<div style="border:1px solid red;color:red;">
<p>这是父路由childOne对应的组件页面</p>
<p>下面可以点击显示嵌套的子路由 </p>
<router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>
<router-link :to="{name:'Reg',params:{num:888}}">显示注册页面</router-link>
<router-view></router-view>
</div>
</template>