本文章由作者原创，共个人总结复习以及分享经验，欢迎指正

路由的安装

路由创建组件

路由简单使用

全局前置守卫

路由嵌套使用

其他

1.路由的安装

查阅vue-router官方文档，可知有：直接下载 / CDN，NPM，以及脚手架（vue cli）添加的方法，作者使用了npm的方法，在终端输入

npm install vue-router

作者选择了3.5.2版本，故在终端输入以下内容安装3.5.2版本路由

npm i [email protected] -S

文章后序内容也将以3.5.2版本路由作为基础

2.路由创建组件

在src文件夹下创建router文件夹，并在router文件夹内创建名为index.js的文件

在index.js文件中导入Vue和Vue-router

//导入Vue 导入Vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

安装vue-router插件

//安装Vue-router插件
Vue.use(VueRouter)

声明一个vue-router实例

//声明一个Vue-router实例
const router = new VueRouter({
  routes: []
})

共享router
```
//共享router
export default router
```

在main.js中导入index.js文件

// 导入路由模块
import router from '@/router/index.js'

在main.js文件实例Vue中添加

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

3.路由简单使用

router-view组件：占位符，将即将渲染的组件与其匹配渲染到目标位置

<template>
  <!-- 占位符 -->
  <router-view></router-view>
</template>

1.在index.js文件中导入Login组件

import Login from '@/components/MyLogin.vue'

2.在index.js文件中的vue-router实例编写其对应的属性

//代表xxxxxxxxx/#/login哈希地址渲染Login组件
const router = new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

3.由于进入网站默认url：xxxxxxxx/#/，故在routes添加

//当检测到哈希地址为'/'时，自动跳转致'/login'，以自动渲染Login组件
{ path: '/', redirect: '/login' }

redirect代表强制跳转至某哈希地址

4.全局前置守卫

1.为Login组件中的登录按钮绑定一个点击事件

<button type="button" @click="login">登录</button>

2.将登录信息token储存在本地储存空间，作为已登录的凭据

 methods: {
    login() {
      if (this.username === 'admin' && this.password === '666666') {
        // 登录成功
        // 1. 存储 token
        localStorage.setItem('token', 'Bearer xxxx')
        // 2. 跳转到后台主页
        this.$router.push('/home')
      } else {
        // 登录失败
        localStorage.removeItem('token')
      }
    }
  }

此处若登陆成功，则记录token信息，并且将哈希地址跳转至/home，若失败则移除token信息

3.封装需要登录才能查看的哈希地址，并共享

在router文件夹内创建pathArr.js文件

在内写入想封装的哈希地址

export default ['/home', '/home/users', '/home/rights']

4.在index.js中导入封装的哈希地址

import pathArr from '@/router/pathArr.js'

5.使用beforeEach函数创建全局前置守卫

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()
  }
})

其中beforeEach中需要写function方法，其中形参to代表着要跳转的哈希地址，from代表从哪里跳转的哈希地址，next代表着通行。若要跳转的地址属于封装的哈希地址则检查本地储存空间是否存在'token'，若存在则next()通行，不存在则强制跳转至'/login'；若要跳转的哈希地址不属于封装的哈希地址，则直接next()通行

6.在home组件中的退出按钮绑定点击事件

<button type="button" @click="logout">退出登录</button>

methods: {
    logout() {
      // 1. 清空 token
      localStorage.removeItem('token')
      // 2. 跳转到登录页面
      this.$router.push('/login')
    }
  }

清空token，跳转至登陆页面，实现了页面返回至未登录的状态

5.路由嵌套使用

1.同样的，创建<router-view>组件，提供渲染占位

<div>
  <router-view></router-view>
</div>

2.使用<router-link>组件，提供链接跳转哈希地址（注意，此组件会自动渲染为<a>组件）

<ul>
  <li>
    <router-link to="/home/users">用户管理</router-link>
  </li>
  <li>
    <router-link to="/home/rights">权限管理</router-link>
  </li>
  <li>
    <router-link to="/home/goods">商品管理</router-link>
  </li>
  <li>
    <router-link to="/home/orders">订单管理</router-link>
  </li>
  <li>
    <router-link to="/home/settings">系统设置</router-link>
  </li>
</ul>

3.在index的router实例中创建一个属性的孩子属性

{
  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 },
  ]
}

其中children中的path:' '中的哈希地址不要写'/'，

4.实现后退功能

<!-- 在后退按钮上绑定一个点击事件，返回上一个历史访问 -->
<button type="button" @click="$router.back()">后退</button>

5.实现path中的动态哈希地址

在要完成图中的操作，点击详情跳转至每一个详细介绍界面，如果每一个行都对应一个哈希地址，当行数超量，那么将造成了代码的臃肿，故我们使用动态哈希地址，以下为方法：

对超链接绑定一个点击事件(prevent阻止跳转，但执行后面的方法)
```
<a href="#" @click.prevent="gotoDetail(item.id)">详情</a>
```

编写方法（注意：这里的'+'不可以用：代替）

 methods: {
    gotoDetail(id) {
      this.$router.push('/home/userinfo/' + id)
    }

在router实例中如下编写（注意，这里id前的：即为动态绑定），实现了简单的复写

const router = new VueRouter({
  routes: [
    {
      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 }
      ]
    }
  ]
})

6.其他

此项目来源于网络黑马程序员，其项目文件构成如下

b站有相关资源与学习视频，本文章原创，仅供分享学习总结以及复习，如有错误欢迎指正

初学Vue---路由基础（学习笔记---保姆级）