vue Router路由研究总结笔记（二、vue router ）

原创

南极客水哥 2021-06-02 13:39:23 ©著作权

©著作权归作者所有：来自51CTO博客作者南极客水哥的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、动态路由应用场景：

当需要根据参数映射到同一个组件时，例如修改不同用户信息项时，定义法：

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	$route.params
/user/:username	/user/evan	`{ username: 'evan' }`
/user/:username/post/:post_id	/user/evan/post/123	`{ username: 'evan', post_id: '123' }`

捕获所有路由或 404 Not found 路由

当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

二、嵌套路由

一个页面有多组件组成时，可以采用嵌套来实现，实际上主要用在主菜单上，做系统总体框架时用，做功能模块时，一般不用，完全可以用父子组件的引入来实现。

三、编程式导航

一般是不用<router-link>标签形式，太麻烦都要引入。而是直接采用：

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

`router.replace(location, onComplete?, onAbort?)`

`router.go(n)`

/ 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

三、命名路由

给路由一个名称，例如：

onst router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

router.push({ name: 'user', params: { userId: 123 }})

四、命名视图

同一级上展示多个视图，而不是嵌套的方式，例如应用主界面布局上，侧导航，main等。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})