Vue 学习笔记10：Vue-Router

一、路由概念

• vue-router 是 vue 中的一个插件库，专门用来实现 SPA 应用。
• 对 SPA 应用的理解

1. 单页 Web 应用（single page web application，SPA）
2. 整个应用只有【一个完整的页面】
3. 点击页面中的导航链接不会刷新页面，只会做页面的【局部更新】
4. 数据需要通过 ajax 请求获取

• 什么是路由？

1. 一个路由就是一组映射关系（key - value）
2. key 为路径，value 可能是 function 或 component

• 路由分类：

1. 后端路由：value 是 function，用于处理客户端提交的请求。根据请求路径找到匹配的函数来处理请求，返回响应数据。
2. 前端路由：value 是 component，用于展示页面内容。当浏览器的路径改变时，对应的组件就会显示。

二、基本使用

1. 一级路由

1. 安装 vue-router，vue2 只能用 vue-router3，所以要指定版本。

   sudo npm install vue-router@3
   

   

2. 在 main.js 中应用插件
   

3. 在 src 下创建 router 文件夹和 index.js，在 index.js 中编写 router 配置项。
   

4. 修改组件，用 router-link 实现切换，active-class 配置高亮属性。
   
   用 router-view 指定展示位置。
   

5. 注意
   （1）路由组件通常放在 pages 文件夹，一般组件通常放在 components 文件夹。
   （2）通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载。
   （3）每个组件都有自己的 $route 属性，里面存储着自己的路由信息。
   （4）整个应用只有一个 router，可以通过组件的 $router 属性获取到。
   

2. 多级路由

1. 配置路由规则时，使用 children 配置项
   
2. 在 Home 组件中用 router-link 实现切换
   

三、路由传参

1. 命名路由

命令路由可以实现简化跳转参数。

1. 命名
   
2. 跳转，必须写成对象形式
   

2. query 传参

利用路由的 query 参数可以实现参数传递。

1. 传递参数：
   
2. 接收参数
   

3. params 传参

1. 配置路由，声明接受 params 参数

   children:[{
   	name:"detail",
   	path:"detail/:id/:title", // 使用占位符声明接受 params 参数
   	component: Detail
   }]
   

2. 传递参数，只能用 name 配置项，不能用 path

   <router-link :to="{
   	name:'detail',
   	params:{
   		id: 666,
   		title: '你好',
   	}
   }">
   跳转
   </router-link>
   

3. 接收参数

   $route.params.id
   $route.params.title
   

4. props 配置传参

路由的 props 配置可以让路由组件更方便的收到参数。

1. 传递参数

   {
   	name:'datail',
   	path:'detail/:id',
   	component: Detail,
   
   	// 第一种写法，props 值为对象，该对象中所有的 key-value 的组合最终都会通过 props 传给 Detail 组件
   	props: {a: 900}
   
   	// 第二种写法，props 值为布尔值 true，只适用于 params，把 params 参数通过 props 传给 Detail 组件
   	props: true
   
   	// 第三种写法，props 值为函数，该函数返回的对象中所有的 key-value 都会通过 props 传给 Detail 组件
   	props(route){
   		return {
   			id: route.query.id,
   			title: route.query.title,
   		}
   	}
   }
   

2. 接收参数
   

四、路由编程式导航

1. replace 属性

• 作用：<route-link> 中的 replace 属性可以控制路由跳转时操作浏览器历史记录的模式。
• 浏览器的历史记录有两种写入方式：分别为 push 和 replace，push 是追加历史记录，replace 是替换当前记录。路由跳转时候默认是 push
• 如何开启 replace 模式：<route-link replace ...>News</route-link>

2. 声明与使用编程式导航

1. 作用：不借助 <route-link> 实现路由跳转，让路由跳转更加灵活。
2. 具体编码：
   
3. 前进和后退
   

3. 缓存路由组件

1. 作用：不让展示的路由组件保持挂载，不被销毁。
2. include 中写入保持挂载的组件名，多个组件用数组包含。具体编码：

   <keep-alive include="News">
   	<router-view></router-view>
   </keep-alive>
   

4. 两个新的生命周期钩子

1. 作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态。
2. 具体名字：
   （1）activated：路由组件被激活时触发。
   （2）deactivated：路由组件失活时触发。
   

五、路由守卫

1. 作用：对路由进行权限控制
2. 分类：全局守卫、独享守卫、组件内守卫

1. 全局守卫

• 全局前置守卫 beforeEach(回调)，初始化时执行、每次路由切换前执行。
  使用前，先给需要进行权限控制的组件 meta（路由元信息）中，添加是否鉴权的配置。
  

  router.beforeEach((to, from, next) => {
      if (to.meta.isAuth) { // 判断当前路由是否需要进行权限控制
          if (localStorage.getItem("school") === "atguigu") { // 权限控制的具体规则
              next() // 放行
          } else {
              alert("你没有权限")
          }
      } else {
          next() // 放行
      }
  })
  

• 全局后置守卫 afterEach(回调)，初始化时执行、每次路由切换后执行

  router.afterEach((to, from) => {
  	// 修改网页标题
      document.title = to.meta.title || "03_vuecli"
  })
  

2. 独享守卫

• 独享守卫 beforeEnter()，只给单独的组件进行鉴权，只有前置守卫。
  

3. 组件内守卫

• 进入守卫：通过路由规则，进入该组件时被调用
• 离开守卫：通过路由规则，离开该组件时被调用
  

最后暴露路由器

export default router

六、路由工作公式

再配置路由时，写入 mode: "xxx" 选择工作模式。

路由有两种工作模式：hash 和 history。

1. hash

• 对于一个 url 来说，# 及其后面的内容就是 hash 值。
• hash 值不会包含在 HTTP 请求中，即：hash 值不会带给服务器。
• hash 模式：
  （1）地址中永远带着 # 号，不美观。
  （2）若将地址通过第三方手机 app 分享，若 app 校验严格，则地址会被标记为不合法。
  （3）兼容性较好。

2. history

• history 模式：
  （1）地址干净、美观。
  （2）兼容性和 hash 模式相比略差。
  （3）应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

3. 本地搭建微服务器

• 如果不部署资源到服务器，本地是不能直接访问的，所以需要搭建一个本地服务器，将页面部署进去。

• 文件结构：

  express
  	├── node_modules
  	│   └── ...
  	├── package.json
  	├── package-lock.json
  	├── server.js
  	└── static
  	    ├── css
  	    │   └── bootstrap.css
  	    ├── favicon.ico
  	    ├── index.html
  	    └── js
  

操作步骤：

1. 打包前端项目

   npm run build
   

2. 新建一个 express 文件夹，初始化并安装 express 和解决页面404的包。

   cd ~/vue
   mkdir express
   cd express
   npm init
   npm i express
   npm i connect-history-api-fallback
   

3. 将打包的静态资源复制到 express 下，并重命名为 static

   cp -r ~/vue/03_vuecli/dist/ ~/vue/express
   mv dist/ static/
   

4. 新建 server.js，再文件中配置路径和端口

   // 引入express
   const express = require("express")
   // 引入connect-history-api-fallback
   const history = require("connect-history-api-fallback")
   
   // 创建app
   const app = express()
   // 必须在指定资源之前使用
   app.use(history())
   // 指定静态资源
   app.use(express.static(__dirname + '/static'))
   
   // 端口监听
   app.listen(5000, (err) => {
       if (!err) console.log("5000端口正在监听...");
   })
   

5. 启动服务

   node server
   

• 现在输入端口就能访问页面。