Vue路由及导航

该方法主要用于定义导航链接，然而有时候我们需要用代码动态改变链接，就需要用到下面这种编程式导航了。

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

---

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：为组件

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

routes: [

// 动态路径参数 以冒号开头

{

// path: ‘/login/:user/name/:hjx’,

path: ‘/’,

// component:loginPage,

// name:‘hjx_login’

//命名视图

components: {

//登录界面

//注意：这里的login为name（命名），loginPage：为组件

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】