// 字符串
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:为组件
login:loginPage,
test:test1
}
正确展示视图的做法如下:
注意:
1.这里可以通过class调整组件的样式,比如位置布局。
2.如果组件本身设置了left,top(即定位),则class对组件不起作用。
参考地址:嵌套命名视图
5.1常见的几种重定向方式
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
xSETB-1715702240297)]
[外链图片转存中…(img-sUEhxlqa-1715702240298)]
[外链图片转存中…(img-evZ7dhKH-1715702240298)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!