什么是路由传参？
路由传参就是嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。
params方式（url中显示参数）
- 定义路由：在定义path路由路径时定义参数名和格式
<!-- vue传参：query和params -->
<div id="app">
<!--在父路由组件上使用router-link进行路由导航，使用router-view进行子路由页面内容渲染-->
<router-link to="/login/11">登录</router-link>
<router-view></router-view>
</div>
var login = {
template:'<h1>这是登录组件模板{{this.id}}</h1>',
data : function(){
return{
id:'',
level:''
}
},
created(){
console.log(this.$route.params.id );
//子路由通过 this.$route.params.id 的形式来获取父路由向子路由传递过来的参数
this.id = this.$route.params.id;
}
//从路由传到组件
}
//路由匹配规则
const router = new VueRouter({
routes:[
{path:'/login/:id',
component:login
},
]
})
var vm =new Vue({
el:'#app',
router
})
- 效果如下
params传参（不显示参数）
- 在父路由组件上使用router-link进行路由导航，使用 <router-link :to="{name:'home',params:{id:001}}> 形式传递参数。注意 ': to= ' 前面的冒号
<template>
<div style="border:1px solid red;color:red;">
<p>这是父路由对应的组件页面</p>
<p>下面可以点击显示嵌套的子路由 </p>
<router-link :to="{name:'Log',params:{num:123}}">显示登录页面</router-link>
<router-link :to="{name:'Reg',params:{num:456}}">显示注册页面</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>
-定义路由时添加name属性给映射的路径取一个别名
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
}
]
- 注意：利用params不显示url传参的方式会导致在刷新页面的时候，传递的值会丢失；
query方式（拼接url）
- 路由导航
<div id="app">
<!-- 拼接字段 -->
<router-link to="/login?id=9&level=2">登录</router-link>
<router-view></router-view>
</div>
- 组件
var login = {
template:'<h1>这是登录组件模板</h1>',
data : function(){
return{
id:'',
level:''
}
},
created(){
console.log(this.$route.query.id + ':' + this.$route.query.level);
//子路由组件通过 this.$route.query.id/level 来显示传递过来的参数
this.id = this.$route.query.id;
this.id = this.$route.query.level;
},
methods: {
add:this.id,
},
//从路由传到组件
}
const router = new VueRouter({
routes:[
{path:'/login',component:login},
]
})
var vm =new Vue({
el:'#app',
router
})
- 效果如下
总结
- 传参可以使用params和query两种方式。
- 使用params传参只能用name来引入路由，即push里面只能是name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。
- 使用query传参使用path来引入路由。
- params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
- query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。
