| 声明式 |
编程式 |
<router-link :to="..."> |
router.push(...) |
在 Vue 实例中，你可以通过 $router 访问路由实例，因此你可以调用 this.$router.push。属性 to 与 router.push 接受的对象种类相同，两者的规则完全相同
相同点：
- params和query都能够通过路由访问传递参数
不同点：
1
2
3
4
5
6
7
|
const userId = "123"
const user="lynn"
this.$router.push({ path: `/user/${userId}` }) // -> /user/123 匹配path:"/user/*"地址的路由
//通过this.$router.params.pathMatch获取userId params:{pathMatch:'123'}
this.$router.push({path: `/About/?user=${user}&userId=${userId}`}); // ->/user/?user=lynn&userId=123
// 通过this.$router.query获取user和usrId query:{user: "lynn", userId: "11"}
|
- 通过命名和params/query对象传递参数
1
2
3
4
|
// 路由配置path:"/user"的路由在地址栏不显示参数-> /user
this.$router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private，注意！！如果用path和params的话params会被忽略
this.$router.push({ path: 'register', query: { plan: 'private' }})
|
- 通过路由命名name和params对象传递的参数刷新后会消失，通过query和路径中传递的参数都不会消失
- 通过配置动态路由可以防止params参数丢失：
1
2
3
4
5
6
7
8
9
10
11
12
|
const route = [
{ name: "About", path: "/about/:user/:userId", component: About },
]
// 1.通过地址
this.$router.push({ path: `/user/${user}/${userId}` }) //地址栏中为/about/lynn/11
// this.$router.params为{user:"lynn",userId:"123"}
// 2.通过命名路由和params参数
this.$router.push({
name: "About",
params: { user, userId },
});
// this.$router.params为{user:"lynn",userId:"123"}，地址栏中为/about/lynn/11
|
- 通过路由命名name和params对象传参不显示在地址栏，但配合了动态路由的话依然会在地址栏中显示