Vue路由及导航

// 字符串

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.常见的几种路由

---

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

    }

  ]

}

]

})

3.命名视图

---

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 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对组件不起作用。

4.嵌套命名视图

---

参考地址：嵌套命名视图

5.重定向和别名

---

5.1常见的几种重定向方式

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
NHwRA-1715018583454)]

[外链图片转存中…(img-vmKi15wL-1715018583454)]

[外链图片转存中…(img-ee76fs5e-1715018583455)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！