vue-router的安装，{path，component，children，meta，redirect}，router-link，router-view，动态路由，导航守卫

1. 认识前端路由

路由其实是网络工程中的一个术语
- 在架构一个网络时，非常重要的两个设备就是路由器和交换机
- 当然，目前在生活中路由器也是越来越被大家所熟知，因为生活中都会用到路由器
- 事实上，路由器主要维护的是一个映射表;
- 映射表会决定数据的流向;
路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段:
- 后端路由阶段;
- 前后端分离阶段;
- 单页面富应用(SPA);

1.1. 后端路由阶段

早期的网站开发整个HTML页面是由服务器来渲染的
- 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.
但是, 一个网站，这么多页面服务器如何处理呢?
- 一个页面有自己对应的网址, 也就是URL;
- URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理;
- Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
上面的这种操作, 就是后端路由:
- 当页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端.
- 这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.
后端路由的缺点:
- 一种情况是整个页面的模块由后端人员来编写和维护的;
- 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码;
- 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情;

1.2. 前后端分离阶段

前端渲染的理解:
- 每次请求涉及到的静态资源都会从静态资源服务器获取，这些资源包括HTML+CSS+JS，然后在前端对这些请求回来的资源进行渲染;
- 需要注意的是，客户端的每一次请求，都会从静态资源服务器请求文件;
- 同时可以看到，和之前的后端路由不同，这时后端只是负责提供API了;
前后端分离阶段:
- 随着Ajax的出现, 有了前后端分离的开发模式;
- 后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中;
- 这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上;
- 并且当移动端(iOS/Android)出现后，后端不需要进行任何处理，依然使用之前的一套API即可;
- 目前比较少的网站采用这种模式开发(jQuery开发模式);

1.2.1. URL的hash

前端路由是如何做到URL和内容进行映射呢？监听URL的改变
URL的hash
- URL的hash也就是锚点(#), 本质上是改变window.location的href属性;
- 可以通过直接赋值location.hash来改变href, 但是页面不发生刷新;
hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
        <a href="#home">HOME</a>
        <a href="#about">ABOUT</a>
        <div class="content"></div>
    </div>

    <script>
        const contentEL = document.querySelector(".content");

        window.addEventListener("hashchange",()=>{
            switch(location.hash){
                case "#home":
                    contentEL.innerHTML = "Home";
                    break;
                case "#about":
                    contentEL.innerHTML = "About";
                    break;
                default:
                    contentEL.innerHTML = "Default";
            }
        })
    </script>

</body>
</html>

1.2.2. HTML5的History

history接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面:
- replaceState：替换原来的路径;
- pushState：使用新的路径;
- popState：路径的回退;
- go：向前或向后改变路径;
- forward：向前改变路径;
- back：向后改变路径;

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
        <a href="./home">HOME</a>
        <a href="./about">ABOUT</a>
        <div class="content"></div>
    </div>

    <script>
        const contentEL = document.querySelector(".content");

        // 监听所有的a元素
        const aELs = document.getElementsByTagName("a");
        for(let ael of aELs){
            ael.addEventListener("click",(e)=>{
                e.preventDefault();
                const href = ael.getAttribute("href");
                
                // 使用新的路径
                history.pushState({},"",href);
                historyChange();
            })
        }

        // 监听popState和go操作
        window.addEventListener("popstate",historyChange);
        window.addEventListener("go",historyChange);

        // 执行设置页面操作
        function historyChange(){
            const path = location.pathname;
            const pathStr = path.substring(path.lastIndexOf("/")+1);
            // console.log(pathStr);
            switch(pathStr){
                case "home":
                    contentEL.innerHTML = "Home";
                    break;
                case "about":
                    contentEL.innerHTML = "About";
                    break;
                default:
                    contentEL.innerHTML = "Default";
            }
        }
    </script>

</body>
</html>

2. 认识vue-router

目前前端流行的三大框架, 都有自己的路由实现:
- Angular的ngRouter
- React的ReactRouter
- Vue的vue-router
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。
- 目前Vue路由最新的版本是4.x版本，我们上课会基于最新的版本讲解。
vue-router是基于路由和组件的
- 路由用于设定访问路径, 将路径和组件映射起来
- 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.
安装Vue Router:
1
npm install vue-router

2.1. 路由的使用步骤

使用vue-router的步骤:
- 第一步：创建路由组件的组件;
- 第二步：配置路由映射: 组件和路径映射关系的routes数组;
- 第三步：通过createRouter创建路由对象，并且传入routes和history模式;
- 第四步：使用路由 - 通过<router-link>和<router-view>;

2.1.1. Hello.vue

放在 src/components文件夹中

<template>
    <div>
        <h2>Hello</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

2.1.2. About.vue

放在 src/components文件夹中

<template>
    <div>
        <h2>About</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

2.1.3. router/index.js

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

// 导入创建的组件
import About from '../components/About.vue';
import Hello from '../components/Hello.vue';

// 配置路由的映射
const routes = [
    { path: '/hello', component: Hello },
    { path: '/about', component: About }
]

// 创建router对象
const router = createRouter({
    routes,
    history: createWebHistory()
})

export default router;

2.1.4. main.js

引入 router/index.js

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

const app = createApp(App);

// 路由
app.use(router);

app.mount('#app');

2.1.5. App.vue

使用路由

<template>
  <div>
    <p>
      <router-link to="/hello">Hello</router-link>
      <router-link to="/about">About</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style scoped>

</style>

2.2. 路由的默认路径

还有一个不太好的实现:
- 默认情况下, 进入网站的首页，希望<router-view>渲染首页的内容;
- 但是在实现中, 默认没有显示首页组件, 必须让用户点击才可以;
如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?
在routes中又配置了一个映射:
path配置的是根路径: /
redirect是重定向, 也就是将根路径重定向到/home的路径下, 这样就可以得到想要的结果

const routes = [
    { path: '/hello', component: Hello },
    { path: '/about', component: About },
    { path: '/', redirect: '/hello' }
]

2.3. history模式

选择不同的history模式

1	import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

createWebHashHistory 导致的路由效果是 http://localhost:8080/#/
createWebHistory 导致的路由效果是 http://localhost:8080

2.4. 路由的其他属性

name属性：路由记录独一无二的名称;
meta属性：自定义的数据

{   path: '/hello', 
       component: ()=> import(
       /* webpackChunkName:"hello-chunk" */
       '../components/Hello.vue'),
       name: 'hello',
       meta: {
           age: 18,
           sex: 'male'
       }
   }

3. 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载:
- 如果把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效;
- 也可以提高首屏的渲染效率;
其实涉及的是webpack的分包知识，而Vue Router默认就支持动态来导入组件:
- 这是因为component可以传入一个组件，也可以接收一个函数，该函数需要放回一个Promise;
- 而import函数就是返回一个Promise;

const routes = [
    { path: '/hello', component: ()=> import('../components/Hello.vue')},
    { path: '/about', component: ()=> import('../components/About.vue') },
    { path: '/', redirect: '/hello' }
]

4. 打包效果分析

分包是没有一个很明确的名称的，其实webpack从3.x开始支持对分包进行命名(chunk name):

进行打包命名

const routes = [
    { path: '/hello', component: ()=> import(
        /* webpackChunkName:"hello-chunk" */
        '../components/Hello.vue')},
    { path: '/about', component: ()=> import(
        /* webpackChunkName:"about-chunk"*/
        '../components/About.vue') },
    { path: '/', redirect: '/hello' }
]

重新打包

5. 动态路由

5.1. 动态路由基本匹配

将给定匹配模式的路由映射到同一个组件:
- 例如，有一个 User 组件，它对所有用户进行渲染，但是用户的ID是不同的;
- 在Vue Router中，在路径中使用一个动态字段来实现，称之为 路径参数;
  1
  2
  3
  4
  {
  path: '/user/:id',
  component: ()=> import('../components/User.vue')
  }

在router-link中进行如下跳转:

1	<router-link to="/user/123">用户：123</router-link>

5.2. 获取动态路由的值

在template中，直接通过 $route.params 获取值;
在created中，通过 this.$route.params 获取值;
在setup中，使用 vue-router库提供的一个hook useRoute;
- 该Hook会返回一个Route对象，对象中保存着当前路由相关的值;

<template>
    <div>
        <h2>{{$route.params.id}}</h2>
        <h2>{{id}}</h2>
        <h2>{{Id}}</h2>
    </div>
</template>

<script>
    import { useRoute } from 'vue-router';

    export default {
        data(){
            return {
                id: this.$route.params.id
            }
        },
        setup(){
            const route = useRoute();
            const Id = route.params.id;
            return {
                Id
            }
        }
    }
</script>

<style scoped>

</style>

5.3. 匹配多个参数

{
    path: '/user/:id/:name',
    component: ()=> import(
        /* webpackChunkName: "user-chunk" */
        '../components/User.vue'
    )    

}

获取参数值

export default {
    created(){
        console.log(this.$route.params);
    }
}

结果

1	{id: '001', name: 'john'}

5.4. NotFound

对于哪些没有匹配到的路由，通常会匹配到固定的某个页面

比如NotFound的错误页面中，可编写一个动态路由用于匹配所有的页面;

{
    path: '/:pathMatch(.*)',
    component: ()=> import('../components/NotFound.vue')
}

可以通过 $route.params.pathMatch 获取到传入的参数:

<template>
    <div>
        <h2>Not Found {{$route.params.pathMatch}}</h2>
    </div>
</template>

当访问 http://localhost:8080/1 时，

5.5. 匹配规则加 *

在/:pathMatch(.*)后面又加了一个 *

{
    path: '/:pathMatch(.*)*',
    component: ()=> import('../components/NotFound.vue')
}

区别在于解析的时候，是否解析 /：

对于http://localhost:8080/1/2/3

使用规则	`/:pathMatch(.*)`	`/:pathMatch(.)`
显示结果	Not Found 1/2/3	Not Found [ “1”, “2”, “3” ]

6. 路由的嵌套

什么是路由的嵌套呢?
- Hello、About、User等都属于底层路由，在它们之间可以来回进行切换;
- 但是 Hello 页面本身，也可能会在多个组件之间来回切换:
  - 比如 Hello 中包括 Product、Message，它们可以在Hello 内部来回切换;
- 这个时候就需要使用嵌套路由，在 Hello 中也使用 router-view 来占位之后需要渲染的组件;

6.1. 嵌套配置

首先需要创建 HelloProduct.vue，HelloMessage.vue

{   path: '/hello', 
    component: ()=> import(
    /* webpackChunkName:"hello-chunk" */
    '../components/Hello.vue'),
    children: [
        {
            path: '',
            redirect: '/hello/product'
        },
        {
            // 也可以省略为 path: 'product'
            path: '/hello/product',
            component: ()=> import('../components/HelloProduct.vue')
        },
        {
            path: '/hello/message',
            component: ()=> import('../components/HelloMessage.vue')
        }
    ]
}

在 Hello.vue 中编写路由

<template>
    <div>
        <h2>Hello</h2>
        <router-link to="/hello/product">Product</router-link>
        <router-link to="/hello/message">Message</router-link>

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

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

6.2. 代码的页面跳转

通过代码来完成页面的跳转，比如点击的是一个按钮

1	<button @click="$router.push('/hello/product')">Product</button>

或者使用methods

methods: {
  jumpToRouter(){
    this.$router.push("/hello/message")
  }
}

也可以传入一个对象

jumpToRouter(){
  this.$router.push({
    path: '/hello/message'
  })
}

如果是在setup中编写的代码，可以通过 useRouter 来获取

import {  useRouter } from 'vue-router';
export default {
  setup(){
      const router = useRouter();
      const jumpToRouter = ()=>{
        router.push({
          path: '/hello/message'
        })
      }
      return {
        jumpToRouter
      }
  }
}

6.3. query方式的参数

通过query的方式来传递参数

jumpToRouter(){
  this.$router.push({
    path: '/hello/message',
    query: {
      name: 'john',
      age: 18
    }
  })
}

通过 $route.query 来获取参数

<p>
    {{$route.query.name}}
    {{$route.query.age}}
</p>

6.4. 页面的前进后退

router的go方法:

const go = ()=>{
  // 向前移动一条记录，与 router.forward()相同
  router.go(1);

  // 返回一条记录，与 router.back()相同
  router.go(-1);

  // 前进3条记录
  // 如果没有那么多记录，静默失败
  router.go(30);
}

router也有back:
- 通过调用 history.back() 回溯历史
- 相当于 router.go(-1);
router也有forward:
- 通过调用 history.forward() 在历史中前进
- 相当于 router.go(1);

7. router-link

7.1. to属性

是一个字符串，或者是一个对象
等价于 a标签的 href 属性

7.2. replace

替换当前的位置
使用push的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退，但是如果希望当前页面是一个替换操作，那么可以使用replace

声明式	编程式
`<router-link to="..." replace>`	`router.replace(...)`

7.3. active-class，exact-active-class

对于 router-link 中的样式匹配问题：

active-class属性:
- 设置激活a元素后应用的class，默认是router-link-active
- /hello 会匹配
- /hello/product 也会匹配
exact-active-class属性:
- 链接精准激活时，应用于渲染的 <a> 的 class，默认是router-link-exact-active;
- /hello 不会匹配
- /hello/product 才会匹配

7.4. v-slot

在vue-router3.x的时候，router-link有一个tag属性，可以决定router-link到底渲染成什么元素:
- 但是在vue-router4.x开始，该属性被移除了;
- 而提供了更加具有灵活性的v-slot的方式来定制渲染的内容;

7.4.1. 使用

<router-link to="/about" v-slot="props">
  <p>
    {{props}}
  </p>
</router-link>

结果

{
  "route": {
    "fullPath": "/about",
    "path": "/about",
    "query": {},
    "hash": "",
    "params": {},
    "matched": [
      {
        "path": "/about",
        "meta": {},
        "props": {
          "default": false
        },
        "children": [],
        "instances": {},
        "leaveGuards": {
          "Set(0)": []
        },
        "updateGuards": {
          "Set(0)": []
        },
        "enterCallbacks": {},
        "components": {
          "default": {
            "__file": "src/components/About.vue",
            "__hmrId": "c226fde6"
          }
        }
      }
    ],
    "meta": {},
    "href": "/about"
  },
  "href": "/about",
  "isActive": true,
  "isExactActive": true
}

7.4.2. props

使用v-slot来作用域插槽来获取内部传的值:

href：解析后的 URL;
route：解析后的规范化的route对象;
navigate：触发导航的函数;
isActive：是否匹配的状态;
isExactActive：是否是精准匹配的状态;

7.4.3. custom

使用custom表示整个元素要自定义
- 如果不写，那么自定义的内容会被包裹在一个 a 元素中;
- 如果写了，自定义内容就不会拥有路由功能，需要指定 props.navigate
  1
  2
  3
  4
  5
  <router-link to="/about" active-class="active" v-slot="props" custom>
  <p @click="props.navigate">
  {{props.href}}
  </p>
  </router-link>

7.4.4. router-view

router-view也提供一个插槽，可以用于 <transition> 和 <keep-alive> 组件来包裹路由组件
- Component：要渲染的组件;
- route：解析出的标准化路由对象;

<router-view v-slot="props">
  <!-- transition：动画 -->
  <transition name="test">
    <!-- keep-alive：缓存 -->
    <keep-alive>
      <component :is="props.Component"></component>
    </keep-alive> 
  </transition>
</router-view>

<style scoped>

  .test-enter-from,
  .test-leave-to{
    opacity: 0;
  }
  .test-enter-active,
  .test-enter-active{
    transition: opacity 1s ease-in;
  }
</style>

8. 操作路由

8.1. 动态添加路由

某些情况下可能需要动态的来添加路由

比如根据用户不同的权限，注册不同的路由;
可以使用一个方法 addRoute;

import { createRouter, createWebHistory } from 'vue-router';

// 不同角色，不同访问路由
const routes = [];
const router = createRouter({
  routers,
  history: createWebHistory()
});


if(管理员){
  router.addRoute({ 
      path: '/about', 
      name: 'about',
    	component: ()=> import('../components/About.vue') 
  });
}
else{
  router.removeRoute('about');
}

如果是为route添加一个children路由，那么可以传入对应的name

此时可以访问 /hello/home

const HomeRoute = { 
    path: 'home', component: ()=> import(
    /* webpackChunkName:"home-chunk"*/
    '../components/Home.vue') 
}

router.addRoute('hello',HomeRoute);

8.2. 动态删除路由

删除路由有以下三种方式
- 添加一个name相同的路由;
- 通过removeRoute方法，传入路由的名称;
- 通过addRoute方法的返回值回调;

const about = router.addRoute({ 
  path: '/about', 
  component: ()=> import('../components/About.vue'),
  name: 'about'
});

// 方式一：将删除之前添加的路由，因为他们具有相同的名字且名字必须唯一
router.addRoute({ 
  path: '/other', 
  component: ()=> import('../components/Other.vue'),
  name: 'about'
});

// 方式二：使用方法
router.removeRoute('about');

// 方式三：回调
about();

8.3. 检查路由是否存在

router.hasRoute()

8.4. 所有路由数组

router.getRoutes()

[
    {
        "path": "/hello/product",
        "meta": {},
        "props": {
            "default": false
        },
        "children": [],
        "instances": {
            "default": {}
        },
        "leaveGuards": {},
        "updateGuards": {},
        "enterCallbacks": {},
        "components": {
            "default": {
                "__file": "src/components/HelloProduct.vue",
                "__hmrId": "903aed26"
            }
        }
    },
    {
        "path": "/hello/message" 
    },
    {
        "path": "/user/:id/:name"
    },
    {
        "path": "/hello",
        "redirect": "product"
    },
    {
        "path": "/hello"
    },
    {
        "path": "/",
        "redirect": "/hello"
    },
    {
        "path": "/about"
    },
    {
        "path": "/:pathMatch(.*)"
    }
]

9. 路由导航守卫

9.1. 基本使用

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航
全局的前置守卫beforeEach是在导航触发时会被回调的
它有两个参数:
- to：即将进入的路由Route对象;
- from：即将离开的路由Route对象;
它有返回值:
- false：取消当前导航;
- 不返回或者undefined：进行默认导航;
- 返回一个路由地址
  - 可以是一个string类型的路径;
  - 可以是一个对象，对象中包含path、query、params等信息;
可选的第三个参数:next
- 在Vue2中我们是通过next函数来决定如何进行跳转的;
- 但是在Vue3中通过返回值来控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next;

router.beforeEach((to,from)=>{
    // 即将进入的路由Route对象
    console.log(to);
    // 即将离开的路由Route对象
    console.log(from);
    // 当路由中存在home，跳转至 login
    if( to.path.indexof("home") !== -1){
    	return '/login';
    }
})

9.2. 登录守卫功能

完成一个功能，只有登录后才能看到其他页面

router/index.js

router.addRoute({
    path: '/login',
    component: ()=>import('../components/Login.vue')
});

router.beforeEach((to,from)=>{
    if( to.path !== '/login' ){
        const token = window.localStorage.getItem("token");
        if(!token){
            return {
                path: '/login'
               
            }
        }
    }
})

<template>
    <div>
        <button @click="Login">login</button>
    </div>
</template>

<script>
    import { useRouter } from 'vue-router';
    export default {
        setup(){
            const router = useRouter();

            const login=()=>{
                window.localStorage.setItem('token','123');
                router.push({
                    path: '/hello'
                })
            }
            return {
                login
            }
        }
    }
</script>

<style scoped>

</style>

9.3. 其他导航守卫

Vue还提供了很多的其他守卫函数，目的都是在某一个时刻给予回调，可以更好的控制程序的流程或者功能:
- https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html

9.4. 完整的导航解析流程

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