vue2 vue-router引入使用详解

1 介绍

Vue 很适合用来构建单页面应用。对于大多数此类应用，都推荐使用官方支持的Vue Router；在单页面应用(Single-page application）中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，因为这类场景下用户通常会在很长的一段时间中做出多次交互。这类的单页面应用中，路由的更新是在客户端执行的。

Vue Router 是 Vue 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

我们来介绍Vue Router的基本使用。本文基于vue2以及vue-router@3.5.1编写。

2 Vue Router的使用

2.1 安装

对于vue2，我们推荐使用vue-router 3.x版本。若大于4.x，则部分功能无法在vue2中正常引入使用。

node环境安装如下：

npm install vue-router@3.5.1

2.2 项目引入使用

在我们工程项目中，路由文件通常需要单独管理，以便于后续的使用以及维护。再此基础下，我们引入分为两步：

1. 创建统一管理路由入口文件
2. vue项目引入使用路由入口文件

2.2.1 创建路由文件

在与main.ts文件的同级目录下创建router文件夹，并添加index.ts文件（使用ts，若使用js也同理）。

文件内容如下：

import Vue from "vue";
import VueRouter from "vue-router";
import routers from "./practice/practice";
import echartsRouters from './practice/echarts'

// 注册vue-router中的所有组件
Vue.use(VueRouter);

const allRouter = [...routers, ...echartsRouters];
const router = new VueRouter({
  mode: "history",
  routes: allRouter
});

export default router;

Vue.use(VueRouter)是为了注册所有组件，以方便全局使用，比如routerview等。

2.2.2 main.ts 引入

代码如下：

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

2.2.3 App.vue配置

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.2.4 整体目录结构

├── public/                             # 静态资源目录
├── src/
│   ├── assets/                         # 全局资源目录
│   │   ├── fonts/
│   │   └── images/
│   │
│   ├── components/                     # 全局组件
│   │   └── UserSelectTable/
│   │       ├── style/
│   │       │   ├── _var.scss
│   │       │   └── index.scss
│   │       ├── UserSelectTable.vue
│   │       └── index.ts
│   │
│   ├── store/                           # 状态管理
│   │   ├── plugins/
│   │   │   ├── persist.ts
│   │   │   └── qiankun.ts
│   │   ├── modules/                     # 除非业务过于复杂，否者不推荐
│   │   │   ├── cart.ts
│   │   │   └── products.ts
│   │   ├── getters.ts                   # 根级别的 getters
│   │   ├── actions.ts                   # 根级别的 action
│   │   ├── mutations.ts                 # 根级别的 mutation
│   │   └── index.ts
│   │
│   ├── router/
│   │   ├── routes.ts                   # 路由配置
│   │   └── index.ts
│   │
│   ├── views/                          # 页面级组件
│   │   ├── Home/
│   │   │   ├── components/             # 页面级组件
│   │   │   ├── services/               # 页面级组数据请求
│   │   │   │   └── repo.ts
│   │   │   └── Home.vue
│   │   │
│   │   └── About/
│   │       ├── components/
│   │       └──  About.vue
│   │
│   └── main.ts                         # 应用入口
│
├── .browserslistrc
├── .env
├── .editorconfig
├── .eslintrc.js
├── .prettierrc
├── babel.config.js
├── vue.config.js
├── jsconfig.json                       
└── package.json

2.4 使用方法

router引入之后，我们可以通过router自带的组件来进行路由管理，以方便大型项目的路由访问以及统一管理。以下介绍常用的几种用法。

2.4.1 使用router-view进行页面视图切换

入之后我们单页面应用可以在app.vue配置使用router-view来切换页面，并进行嵌套路由配置。引入之后，在 Vue 实例中，你可以通过 $router 访问路由实例，若想要导航到不同的 URL，使用this.$router.push(...)进行跳转。

嵌套路由案例如下：

	{
      path: '/user',
      component: User,
      children: [
        {
          // 当访问 /user/profile 时，
          // 页面组件UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当访问 /user/posts 时
          // 页面组件UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }

详细的router-view使用方法可见vue router-view使用详解

2.4.2 使用router-link进行页面跳转

当使用 <router-link> 时，内部会调用router.push(...)这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...)

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

2.4.3 路由重定向

定义路由时添加redirect属性，即可实现重定向，案例如下：

routes: [
    { path: '/a', redirect: '/b' }
  ]

该案例为，访问路由a时，会自动重定向到b。做废弃页面改造时通常会非常有用

2.4.4 路由传参

在页面跳转时，可以在push方法中添加参数，不同的路由访问方式，传参方式不同；

1. 使用path跳转时，路由传参通过query方式；
2. 使用name跳转时，路由传参通过params’方式；

这里的path和name都是我们路由文件对应的键值；如下：

 {
    path: "/productList",
    name: "productList",
    component: () => import("@/views/productList/index.vue")
  },

使用path和name路由传参代码如下：

1. path路由传参

// path跳转对应query方式传参
this.$router.push({
 path: '/routerJump',
  query: {
    name: 'sam', 
    stuNo: '1234'
  }
})

在下一个页面取参：

// 使用query取参
this.stuNo = this.$route.query.stuNo；

1. name路由传参

// // name跳转对应params方式传参
this.$router.push({
 name: 'routerJump',
  params: {
    name: 'sam', 
    stuNo: '1234'
  }
})

在下一个页面取参:

// 使用params取参
this.stuNo = this.$route.params.stuNo；

注意，取参的时候使用的$route中的route是没有“r”的。

2.5.5 路由守卫

1、路由加载前置守卫：router.beforeEach

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 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

使用案例：登录认证成功跳转，否则不跳转：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

2、路由跳转后置钩子

对于后置钩子和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

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

3、 组件内的守卫

在实际情况下，我们使用组件内守卫较多，在路由组件内直接定义以下路由导航守卫：

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

要注意此时生命周期对this的访问以及处理，具体使用如下：

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

3 其他

本文介绍的是在实际开发中使用较多的Vue Router内置组件，用好这些组件，往往能够使得一些复杂的问题简单化，使得项目开发得心应手。另本文参考官网进行vue2路由配置实际操作，更加全面的使用请参考官网vue router。