Vue Router学习

---

title: Vue Router学习
date: 2021-6-7 21:08:18
author: Xilong88
tags: Vue

简单理解和总结：

个人理解：Vue Router是一个插件，可以通过组合组件来组成应用程序，把components添加到routes里面，就可以实现路由的功能。

官方的例子：

Vue Router 官网

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

这样当我们点击link就可以渲染不同的组件了，这样有一些好处：
1.代码减少了。正常情况下，我应该会新建一个网页，然后让这个网页跳转到这个网页，由此来实现不同页面的路由。但是在有了Vue Router之后，就可以很大程度得复用代码，在这个页面上我们去渲染另一个组件，在链接上显示链接变了，网页也变了，但是实际上还是同一页。这样就能省去很多代码，并且用户体验变好了。

2.性能优化了。我们去重新渲染页面，不仅要发送http请求，还要重新进行整页的DOM加载，这就导致了性能下降，相比于渲染整个页面，Vue Router渲染组件，性能要好。

this.$router可以访问路由器，也可以直接通过router实例的名称来访问，但是相比于在每个组件注入router实例，直接通过this.$router访问耦合更低。

<router-link> 匹配路由之后会自动添加.router-link-active样式。

动态路由匹配

路径参数往往不是静态的，是带有一些参数的，这些参数是可能会变化的，所以要用动态路径参数：

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

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

这样，像 /user/foo 和 /user/bar 都将映射到相同的路由，只是参数id不同，通过this.$route.params就可以访问这个参数。

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

所有的路径参数都会放到这里params里面去：

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

响应路由参数的变化

/user/foo 导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

如果想要路由参数变化做出响应，就应该通过watch去监测$route对象的变化

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

同样可以通过导航守卫来实现，这个后面还会讲。

const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

导航守卫

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

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

路由 { path: ‘*’ } 通常用于客户端 404 错误。

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

高级匹配模式
可以使用更高级的匹配方式,path-to-regexp

匹配优先级
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。

嵌套路由

router-view就是用来显示组件的，所以通过嵌套router-view和router，可以嵌套路由：

把子组件放到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

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

这里children的path就不能带‘/’因为这样会被当成根路径。

children里面的routes和外面的routes都是一样的，所以可以多层嵌套。

像上面的例子，访问/user/profile就会有响应，但是访问不存在的子路由，就不行，所以可以加一个空的子路由来响应一些东西：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome }

        // ...其他子路由
      ]
    }
  ]
})

编程式的导航
除了通过点击router-link来导航以外，还可以使用router.push实例方法

router.push(location, onComplete?, onAbort?)

实际上点击router-link之后会调用这个方法，同时history的栈里面会添加一个记录。

// 字符串
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

也就是说，要么name＋params，要么提供完整的path，自动解析出params，假如带path又带了params，后者无效。query是在path后面去带请求参数。

router-link的to属性也受上述原则限制。

可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort
回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止(导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

在 3.1.0+，可以省略第二个和第三个参数，此时如果支持 Promise，router.push 或 router.replace将返回一个 Promise。

如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 变成 /users/2)，你需要使用beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

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

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

相当于router-link 带replace参数：<router-link :to="..." replace>

router.go(n)

可以基于history前进或后退：

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

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

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

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

Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。

这些方法实际上效仿的window.history，所以看起来很像。

命名路由

通过path来使用路由，有时候可能不太方便，所以可以采用name：

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

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

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

命名视图

有时候可能有多个组件要渲染到不同的router-view里面，这时候需要给视图命名：

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

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

这样对应的组件会渲染到对应的视图里面去。

嵌套命名视图

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+

Nav 只是一个常规组件。

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

实际上就是表达一个意思，router-view嵌套和命名视图可以同时使用，假如name不匹配，那么相应的router-view不渲染。

重定向和别名

重定向

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

访问/a的时候，会被重定向到/b上去

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

别名
访问/b和访问/a是完全一样的，相当于/b就是/a的别名，在路径上不会改变，但是实际上就是渲染的/a的组件。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

路由组件传参

取代与 $route 的耦合

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

如果 props 被设置为 true，route.params 将会被设置为组件属性。

对象模式

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

const router = new VueRouter({
  routes: [
    {
      path: '/promotion/from-newsletter',
      component: Promotion,
      props: { newsletterPopup: false }
    }
  ]
})

函数模式

可以创建一个函数返回 props

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: route => ({ query: route.query.q })
    }
  ]
})

URL /search?q=vue 会将 {query: ‘vue’} 作为属性传递给 SearchUser 组件

HTML5 History 模式

H5有history.pushState方法进行URL跳转而不重新加载页面，mode调成history：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

这需要配置后台，在讲history对象的时候提到过。

后端配置 略

404

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

进阶
导航守卫
路由元信息
过渡动效
数据获取
滚动行为
路由懒加载
导航故障

简单得看了一下,准备要用的时候再细学。