vue-router 的基本使用

1. 什么是 vue-router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项中组件的切换。

vue-router 的官方文档地址：https://router.vuejs.org/zh/

2. vue-router 安装和配置的步骤

① 安装 vue-router 包
② 创建路由模块
③ 导入并挂载路由模块
④ 声明路由链接和占位符

2.1 在项目中安装 vue-router

在 vue2 的项目中，安装 vue-router 的命令如下：

2.2 创建路由模块

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import pathArr from '@/router/pathArr.js'// 导入需要的组件
import Login from '@/components/MyLogin.vue'
import Home from '@/components/MyHome.vue'import Users from '@/components/menus/MyUsers.vue'
import Rights from '@/components/menus/MyRights.vue'
import Goods from '@/components/menus/MyGoods.vue'
import Orders from '@/components/menus/MyOrders.vue'
import Settings from '@/components/menus/MySettings.vue'
import UserDetail from '@/components/user/MyUserDetail.vue'Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/', redirect: '/login' },// 登录的路由规则{ path: '/login', component: Login },// 后台主页的路由规则{path: '/home',component: Home,redirect: '/home/users',children: [{ path: 'users', component: Users },{ path: 'rights', component: Rights },{ path: 'goods', component: Goods },{ path: 'orders', component: Orders },{ path: 'settings', component: Settings },// 用户详情页的路由规则{ path: 'userinfo/:id', component: UserDetail, props: true }]}]
})// 全局前置守卫
router.beforeEach(function(to, from, next) {if (pathArr.indexOf(to.path) !== -1) {const token = localStorage.getItem('token')if (token) {next()} else {next('/login')}} else {next()}
})export default router

2.3 导入并挂载路由模块

在 src/main.js 入口文件中，导入并挂载路由模块。示例代码如下：

官网挂在路由模块介绍：

// 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')// 现在，应用已经启动了！

实际开发中：

import Vue from 'vue'
import App from './App.vue'
// 导入路由模块，目的：拿到路由的实例对象
// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js 的文件
//相当于import router from '@/router/index.js'
//下面的这种写法，程序会自动导入相应的index.js文件
import router from '@/router'Vue.config.productionTip = falsenew Vue({render: h => h(App),// 在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载// router: 路由的实例对象//下面是简写的方式，相当于：   router:router//当key和value的值相同的时候就可以使用简写的方式router
}).$mount('#app')

2.4 声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的router-link标签和 router-view标签声明路由链接和占位符：

官网中声明路由链接和占位符：
实际开发中：

<template><div class="app-container"><h1>App2 组件</h1><!-- 当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的 a 链接了 --><!-- <a href="#/home">首页</a> --><router-link to="/home">首页</router-link><!-- 注意1：在 hash 地址中， / 后面的参数项，叫做“路径参数” --><!-- 在路由“参数对象”中，需要使用 this.$route.params 来访问路径参数 --><!-- 注意2：在 hash 地址中，? 后面的参数项，叫做“查询参数” --><!-- 在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数 --><!-- 注意3：在 this.$route 中，path 只是路径部分；fullPath 是完整的地址 --><!-- 例如： --><!-- /movie/2?name=zs&age=20 是 fullPath 的值 --><!-- /movie/2 是 path 的值 --><router-link to="/movie/1">洛基</router-link><router-link to="/movie/2?name=zs&age=20">雷神</router-link><router-link to="/movie/3">复联</router-link><router-link to="/about">关于</router-link><hr /><!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件了 --><!-- 它的作用很单纯：占位符 --><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script><style lang="less" scoped>
.app-container {background-color: #efefef;overflow: hidden;margin: 10px;padding: 15px;> a {margin-right: 10px;}
}
</style>

router-link相当于a标签，触发需要加载的页面，需要加载的页面被触发之后，会自动加载到router-view标签中显示。

3. 声明路由的匹配规则

在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则。示例代码如下：

实际开发中：

// src/router/index.js 就是当前项目的路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'import Login from '@/components/Login.vue'
import Main from '@/components/Main.vue'// 把 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数的作用，就是来安装插件的
Vue.use(VueRouter)// 创建路由的实例对象
const router = new VueRouter({// routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系routes: [// 重定向的路由规则{ path: '/', redirect: '/home' },// 路由规则{ path: '/home', component: Home },// 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息// 可以为路由规则开启 props 传参，从而方便的拿到动态参数的值{ path: '/movie/:mid', component: Movie, props: true },{path: '/about',component: About,// redirect: '/about/tab1',children: [// 子路由规则// 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”{ path: '', component: Tab1 },{ path: 'tab2', component: Tab2 }]},{ path: '/login', component: Login },{ path: '/main', component: Main }]
})// 为 router 实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {// to 表示将要访问的路由的信息对象// from 表示将要离开的路由的信息对象// next() 函数表示放行的意思// 分析：// 1. 要拿到用户将要访问的 hash 地址// 2. 判断 hash 地址是否等于 /main。// 2.1 如果等于 /main，证明需要登录之后，才能访问成功// 2.2 如果不等于 /main，则不需要登录，直接放行  next()// 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值// 3.1 如果有 token，则放行// 3.2 如果没有 token，则强制跳转到 /login 登录页if (to.path === '/main') {// 要访问后台主页，需要判断是否有 tokenconst token = localStorage.getItem('token')if (token) {next()} else {// 没有登录，强制跳转到登录页next('/login')}} else {next()}
})export default router