传参:
1. 页面式(html)标签路由跳转传参 ----- router-link(其实就是a标签)
2. js编程式路由跳转 ----- this.$router.push() // params query
3. 路由组件传参 ----- 在路由配置中用分号拼接参数
获取参数:
1. this.$router.params ----- 搭配路由的name属性,参数作为路由的一部分,不会在url显示
2. this.$router.query ----- 使用path来匹配路由,可以在url看到?后面的就是传递的参数
一、router-link
<router-link :to="{path:'/news/detail',query:{id:1}}">详情</router-link>
使用path + 路径,query + 参数。则用this.$route.query.id取值。
<router-link :to="{name:'newsDetail',params:{id:1}}">详情</router-link>
使用name +路由名称,params + 参数。则用this.$route.params.id取值。
二、this.$router.push() ----- key,value键值对的形式
1. query 显示在url
// 传参
sendData(){ this.$router.push({ path: './describe', query: { id:id, title:title } }) }
// 接收参数 this.$route.query.id this.$route.query.title
2. params 不会显示在url
// 传参 sendData(){ this.$router.push({ name: './describe', params: { id:id, title:title } }) }
// 接收参数 this.$route.params.id this.$route.params.title
三、路由组件传参
路由部分:
let routes = [ { path: '/news', name: 'news', props: true, meta: {}, component: () => import('@/page/news.vue') },{ path: '/newsDetail/:id', name: 'newsDetail', props: true, meta: {}, component: () => import('@/page/newsDetail.vue') } ]
path后面跟占位符,props设置为波尔类型,true。跳转页面时使用this.$router.push传参。
下面是取值的方式
export default { name: 'HelloWorld', data () { return { msg: '123 } }, props:['id'], mounted(){ console.log(this.$route.params.id, this.id) } }
取值时,方法1:可以直接使用this.$route.params.id取值。
方法2:也可以先放到props中,就可以直接用this.id拿到了。