Summary of vue-router usage (with code)

This time I will bring you a summary of the use of vue-router (with code), what are the precautions when using vue-router, the following is a practical case, let's take a look.

[Related recommendations: vue interview questions (2020)]

Preface

Interview today When asked about Vue's dynamic routing, I didn't even answer. I didn't think it was a rare question. I haven’t read the documentation of vue-router for a long time, and many of the things and concepts used don’t match up. When I came back and saw what dynamic routing was, I was dumbfounded. It seems that it is necessary to summarize the relevant knowledge of vue-router. It feels so embarrassing.

The working principle of a single-page application

The working principle of a single-page application is that the hash change after the # of the browser URL will cause the page to change. Divide the page into different small modules, and then modify the hash to make the page display the content we want to see.

So why are the hashes different and why does it affect the display of the page? What does the browser do here? In the past, the content after # was generally used as an anchor, but it was positioned at a certain location on a page. How is this done? How is it different from our current routing? (I can imagine that displaying one route will hide other routes, is that true?) I will take a look and write about this doubt later. The most important thing now is to familiarize yourself with the basic concepts.

Text

When you want to add vue-router, what we need to do is map components to routes ( routes), and then tell vue-router where to render them

Start

//*** router-link 告诉浏览器去哪个路由
//*** router-view 告诉路由在哪里展示内容
<p 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>
</p>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<p>foo</p>' }
const Bar = { template: '<p>bar</p>' }
// 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')
// 现在，应用已经启动了！

Dynamic route matching

Equivalent to the same component, because different parameters display different component contents. In fact, it is to use "dynamic path parameters" in the routing path of vue-router

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

Then we enter uesr/001 and user/002 are actually the same route entered, and different content can be displayed on the content page according to different parameters. Generally applicable scenarios: list, permission control

When defined, use: Indicates dynamic routing

Use {{ $route.params.id }} to get this The content of the parameters in the route

When using route parameters, for example, navigating from /user/foo to /user/bar, the original component instance will be reused. Because both routes render the same component, reuse is more efficient than destroying and recreating it. However, this also means that the component's lifecycle hooks will no longer be called.

When reusing components, if you want to respond to changes in routing parameters, you can simply watch (monitor changes) $route object

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

Sometimes, the same path can match multiple Routing, at this time, the matching priority is based on the definition order of the route: whoever defines it first will have the highest priority.

Nested routing

Nest a route inside the route

//路由里面也会出现 <router-view> 这是嵌套路由展示内容的地方
const User = {
 template: `
 <p class="user">
  <h2>User {{ $route.params.id }}</h2>
  <router-view></router-view>
 </p>
 `
}
//定义路由的时候在 加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
  }
  ]
 }
 ]
})

Set an empty route, if there is no specified route Empty route content will be displayed when

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

Programmatic Navigation

Declarative:
Programmatic: router.push(...)

You can imagine that programmatic push can be understood as pushing a new hash into the browser history, causing routing to change

router.replace() Modify the route but it does not exist in the history
router.go(n) It is a bit like JS’s window.history.go(n)

Naming the route is to give each one Route definitiona name.

Named View

Sometimes you want to display multiple views at the same time (at the same level) instead of nested display, for example, create a layout with sidebar (side navigation) There are two views: and main (main content). At this time, naming the view comes in handy. Instead of having a single outlet, you can have multiple individually named views in your interface. If router-view does not set a name, it defaults to default.

<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>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：

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

重定向和别名

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

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

一般首页的时候可以重定向到其他的地方

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

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

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

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

『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

上面对应的路由配置为：

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

『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

HTML5 History 模式

ue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

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

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

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

或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。

导航守卫

我的理解 就是组件或者全局级别的 组件的钩子函数

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

全局守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

next(‘/') 或者 next({ path: ‘/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {
 // ...
})

路由独享的守卫

你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

这些守卫与全局前置守卫的方法参数是一样的。

组件内的守卫

最后，你可以在路由组件内直接定义以下路由导航守卫：

beforeRouteEnter 
beforeRouteUpdate (2.2 新增) 
beforeRouteLeave
const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
 },
 beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
 },
 beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
 }
}

beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

完整的导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由元信息

我的理解就是 他可以把路由的父路径都列举出来，完成一些任务，比如登录，user 组件需要登录，那么user下面的foo组件也需要，那么可以通过这个属性 来检测这个路由线上 的一些状态。

定义路由的时候可以配置 meta 字段：

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   children: [
    {
     path: 'bar',
     component: Bar,
     // a meta field
     meta: { requiresAuth: true }
    }
   ]
  }
 ]
})

首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象（还有在导航守卫中的路由对象）的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段：

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // this route requires auth, check if logged in
  // if not, redirect to login page.
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 确保一定要调用 next()
 }
})

数据获取

我的理解就是在哪里获取数据，可以再组件里面，也可以在组件的守卫里面，也就是组件的生命周期里面。

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。

导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件，需要基于 $route.params.id 获取文章数据：

<template>
 <p class="post">
  <p class="loading" v-if="loading">
   Loading...
  </p>
  <p v-if="error" class="error">
   {{ error }}
  </p>
  <p v-if="post" class="content">
   <h2>{{ post.title }}</h2>
   <p>{{ post.body }}</p>
  </p>
 </p>
</template>
export default {
 data () {
  return {
   loading: false,
   post: null,
   error: null
  }
 },
 created () {
  // 组件创建完后获取数据，
  // 此时 data 已经被 observed 了
  this.fetchData()
 },
 watch: {
  // 如果路由有变化，会再次执行该方法
  '$route': 'fetchData'
 },
 methods: {
  fetchData () {
   this.error = this.post = null
   this.loading = true
   // replace getPost with your data fetching util / API wrapper
   getPost(this.$route.params.id, (err, post) => {
    this.loading = false
    if (err) {
     this.error = err.toString()
    } else {
     this.post = post
    }
   })
  }
 }
}

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法。

export default {
 data () {
  return {
   post: null,
   error: null
  }
 },
 beforeRouteEnter (to, from, next) {
  getPost(to.params.id, (err, post) => {
   next(vm => vm.setData(err, post))
  })
 },
 // 路由改变前，组件就已经渲染完了
 // 逻辑稍稍不同
 beforeRouteUpdate (to, from, next) {
  this.post = null
  getPost(to.params.id, (err, post) => {
   this.setData(err, post)
   next()
  })
 },
 methods: {
  setData (err, post) {
   if (err) {
    this.error = err.toString()
   } else {
    this.post = post
   }
  }
 }
}

在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue+Echarts实现点击高亮（附代码）

用vue让a标签点击高亮（附代码）

The above is the detailed content of Summary of vue-router usage (with code). For more information, please follow other related articles on the PHP Chinese website!