路由传参-接参1、
router-link里面的 to属性传参
<router-link
:to = "{
name: 'list',
params: { /* 传给路由表的数据 */
id: ele.api_cid
},
query: {
cid: ele.api_cid
}
}"
>
<img :src = " ele.img " alt="">
<span> {{ ele.name }} </span>
</router-link>
路由表:
{
path: '/list/:id', //用于url携带id 和 查找字符串 这里的id就是to属性里parmas里面的id
component: List,
name: 'list'
},
接参:
-通过 this.$route就可以将路由路径中的数据接收到,这个就是路由接参
编程式导航
//this.$router.push('/mine/login')
// this.$router.push({
// name: 'login',
// params: {},
// query: {}
// })
// this.$router.replace('/mine/login')
// this.$router.replace({
// name: 'login'
// })
- replace 不会将我们的页面跳转放入历史记录,效果是返回2层
- push 会将我们的页面跳转放入历史记录,效果返回一层