该方法主要用于定义导航链接,然而有时候我们需要用代码动态改变链接,就需要用到下面这种编程式导航了。
1.2编程式导航
在 Vue 实例内部,你可以通过
$router
访问路由实例。因此你可以调用this.$router.push
。
router.push(…)
常见的几种用法有以下几种。
// 字符串
router.push(‘home’)
// 对象
router.push({ path: ‘home’ })
// 命名的路由
router.push({ name: ‘user’, params: { userId: ‘123’ }})
// 带查询参数,变成 /register?plan=private
router.push({ path: ‘register’, query: { plan: ‘private’ }})
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:
const userId = ‘123’
router.push({ name: ‘user’, params: { userId }}) // -> /user/123
router.push({ path: /user/${userId}
}) // -> /user/123
// 这里的 params 不生效
router.push({ path: ‘/user’, params: { userId }}) // -> /user
1.3 使用replace导航
在 2.2.0+,可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。在 3.1.0+,可以省略第二个和第三个参数,此时如果支持 Promise,router.push 或 router.replace 将返回一个 Promise。
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
使用:
this.$router.replace({path: ‘/cart’});
2.1命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在
routes
配置中给某个路由设置名称
具体做法如下:
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',----通过name指明路由的名字
component: User
}
]
})
要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:
下面这种做法就会把路由导航到 /user/123 路径。params:为传递给’:'后面的参数
User
2.2动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。那么,我们可以在
vue-router
的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:
const User = {
template: ‘
User’
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
现在呢,像 /user/foo 和 /user/bar 都将映射到相同的路由。即以/user开头的路径都会映射到User组件
一个“路径参数”使用冒号
:
标记。当匹配到一个路由时,参数值会被设置到this.$route.params
,可以在每个组件内使用。于是,我们可以更新User
的模板,输出当前用户的 ID:
const User = {
template: ‘
User {{ $route.params.id }}’
}
| 模式 | 匹配路径 | $route.params |
| — | — | — |
| /user/:username | /user/evan | { username: 'evan' }
|
| /user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: '123' }
|
2.3嵌套路由匹配
要在嵌套的出口中渲染组件,需要在
VueRouter
的参数中使用children
配置:
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果
router-view
没有设置名字,那么默认为default
。
即通过使用name属性即可
3.1对命名视图的正确理解
该命名视图的作用就是可以通过一个链接同时展示多个组件,并且可以对这些组件进行独立布局。
其实路由配置应该像下面这样:如果你要通过一个链接同时展示多个组件。你需要要把所展示的路由组件放在一个componts下才可以。如下所示:
export default new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{
// path: ‘/login/:user/name/:hjx’,
path: ‘/’,
// component:loginPage,
// name:‘hjx_login’
//命名视图
components: {
//登录界面
//注意:这里的login为name(命名),loginPage:为组件
最后
正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
routes: [
// 动态路径参数 以冒号开头
{
// path: ‘/login/:user/name/:hjx’,
path: ‘/’,
// component:loginPage,
// name:‘hjx_login’
//命名视图
components: {
//登录界面
//注意:这里的login为name(命名),loginPage:为组件
最后
正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】