通过上章 📖vue进阶-vue-route 学习,我们发现路由的设置和获取会用到 this.$router
和 this.$route
,容易混淆,本章做下区分。
this.$router
✨this.$router
:访问路由器。是一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push()
、replace()
、 go()
等方法。
vue获取路由路径数组?
this.$router.options.routes 或者 this.$route.matched
this.$route
✨this.$route
:当前路由对象。每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name
、path
、params
、query
等属性。
区别
- 📌this.$router 是用来 操作 路由的
- 📌this.$route 是用来 获取 路由信息的
// Home.vue
export default {
computed: {
username() {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username
},
},
methods: {
goToDashboard() {
if (isAuthenticated) {
this.$router.push('/dashboard')
} else {
this.$router.push('/login')
}
},
},
}
⚠️注: 要在 setup
函数中访问路由,请调用 useRouter
或 useRoute
函数。
💦 我们会经常使用 router
实例,请记住,this.$router
与直接使用通过 createRouter
创建的 router
实例完全相同。我们使用 this.$router
的原因是,我们不想在每个需要操作路由的组件中都导入路由。
编程式导航
在 Vue 实例中,你可以通过 $router
访问路由实例。因此你可以调用 this.$router.push
。当你点击 <router-link>
时,内部会调用这个方法,所以点击 <router-link :to="...">
相当于调用 router.push(...)
。
声明式 | 编程式 |
---|---|
<router-link :to=“…”> | router.push(…) |
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })
注意:如果提供了 path,params 会被忽略。
🎈router.push
和所有其他导航方法都会返回一个 Promise,让我们可以等到导航完成后才知道是成功还是失败。
路由传参
{
name: child
path: '/child/:id',
component: Child
},
{
name: user
path: '/user',
component: User
}
params传参
this.$router.push({
path:'/child/${id}',
})
或者
this.$router.push({
name: 'child',
params: { id: '1001' }
})
获取params: this.$route.params.id
query 传参
this.$router.push({
path:'/user',
query:{userId: '123'}
});
或者
this.$router.push({
name: 'user',
query: {userId: '123'}
});
获取query:this.$route.query.userId
综合
this.$router.push({
name: 'child',
params: { id: '1001' },
query: {title: '路由组件query传参', userName: 'Jack'}
})
获取params: this.$route.params.id
获取query:this.$route.query.userId