1.动态路径参数 http://localhost:8081/#/user/1
配置路由:
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
router-link中使用
<router-link :to="'/user/'+id">跳转</router-link>
页面中使用:
<div>{{ $route.params.id }}</div>
2.router-link传参的两种写法
a.http://localhost:8081/#/user?id=1
<router-link :to="{path:'/user',query: {id: 1}}">跳转</router-link>
页面中使用:
<div>{{ $route.query.id }}</div>
b.http://localhost:8081/#/user
<router-link :to="{ name: 'user', params: { id: 1}}">跳转</router-link>
页面中使用:
<div>{{ $route.params.id }}</div>
3.编程式 传参
this.$router.push({ path: '/user', query: { id: 111111 }})
this.$router.push({ name: 'user', params: { id: 111111 }})