Vue3--Vue Router详解--学习笔记

1. 认识vue-router

Angular的ngRouter
React的ReactRouter
Vue的vue-router

Vue Router 是Vue.js的官方路由：

它与Vue.js核心深度集成，让Vue.js构建单页应用（SPA）变得非常容易；
目前Vue路由最新的版本是4.x版本。

vue-router是基于路由和组件的

路由用于设定访问路径，将路径和组件映射起来
在vue-router的单页面应用中，页面的路径的改变就是组件的切换

安装Vue Router

npm install vue-router

2. 路由的基本使用

App.vue

<template><div><div>app</div><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><router-view></router-view></div>
</template><script></script><style></style>

router/index.js

import { createRouter,createWebHashHistory,createWebHistory } from "vue-router";import Home from '../Views/Home.vue'
import About from '../Views/About.vue'
// 创建一个路由：映射关系
const router = createRouter({// 指定采用的模式  hash// history:createWebHashHistory(),// 使用history模式history:createWebHistory(),routes:[{path:'/',redirect:'/home'},{path:"/home",component:Home},{path:"/about",component:About}]
})export default router

Home.vue

<template><div>home</div>
</template><script>export default {// name:"Home"}
</script><style scoped></style>

About.vue

<template><div>About</div>
</template><script>export default {}
</script><style scoped></style>

3.路由模式（history和hash）

   // 指定采用的模式  hashhistory:createWebHashHistory(),// 使用history模式history:createWebHistory(),

4. 不记录历史（replace）

<router-link to="/about" replace>关于</router-link>

5. to属性绑定对象

    <router-link :to="{path:'/about'}" replace>关于</router-link>

6. 所在路由样式修改

   .router-link-active{color: red;font-size: 30px;}

设置默认选中class （active-class）

<router-link :to="{path:'/about'}" active-class="link-active">关于</router-link>

7. 路由的懒加载和其他属性

分包处理

const Home = () => import("../Views/Home.vue");
const About = () => import("../Views/About.vue");

分包处理后，不知道那个文件编译打包的，我们可以用魔法注释（/ webpackChunkName:‘about’ /）
在这里插入图片描述

const Home = () => import(/* webpackChunkName:'home' */"../Views/Home.vue");
const About = () => import(/* webpackChunkName:'about' */"../Views/About.vue");

8.获取参数

在template中获取

{{  $route.params.id }}

在compistion-api中获取

<script setup>import { useRoute,onBeforeRouteUpdate } from 'vue-router';const route = useRoute();console.log(route.params.id)// 获取route跳转id (路由守卫)onBeforeRouteUpdate((to,from)=>{console.log("from:",from.params.id)console.log("to:",to.params.id)})
</script>

在options-api中获取id

this.$route.params.id

9.路由不存在

router/index.js

{path:"/:pathMatch(.*)*",component:()=>import('../Views/Notfound.vue')}

Notfound.vue

<template><div>您的页面没找到{{ $route.params.pathMatch }}</div>
</template><script>export default {}
</script><style scoped></style>

10.编程式路由跳转的使用

<template><!-- 其他元素调整 --><span @click="go_home">首页</span><button @click="go_about">关于	    </button>
</template>
<script setup>import { useRouter } from 'vue-router';const router = useRouter()// 监听元素点击function go_home(){// 调整到首页// router.push('/home')router.push({// name:"home"path:'/home'})}function go_about(){// 调整到关于router.push({path:'/about',query:{name:'why',age:18}})}
</script>

options-api写法

<script>export default{methods:{go_home:function(){// 调整到首页// router.push('/home')this.$router.push({// name:"home"path:'/home'})},go_about:function(){// 调整到关于this.$router.push({path:'/about',query:{name:'why',age:18}})}}}
</script>

页面的前进和后退

<script setup>
import { useRouter } from 'vue-router'const router = useRouter();
function back(){// router.back()//  router.forward()// go(delta)// go(1) -> forward();// go(-1) -> back()router.go(-1)
}
</script>

11. 动态添加路由

动态添加路由
router/index.js

let isAdmin = true
if(isAdmin){// 一级路由router.addRoute({path:"/admin",component:()=>import("../Views/Admin.vue")})// 添加vip页面router.addRoute("home",{path:"vip",component:()=>import('../Views/HomeVip.vue')})
}

删除路由有以下三种方式：

方式一：添加一个name相同的路由
方式二：通过removeRoute方法，传入路由的名称
方式三：通过addRoute方法的返回值回调

在这里插入图片描述
路由的其他方法补充

router.hasRoute():检查路由是否存在。
router.getRoutes():获取一个包含所有路由记录的数组。

12. 路由导航守卫

vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
全局的前置守卫beforeEach是在导航触发时会被回调的：
它有两个参数：

to：即将进入的路由Route对象；
from：即将离开的路由Route对象；

它有返回值：

false：取消当前导航
不返回或者undefined：进行默认导航
返回一个路由地址：
1. 可以是一个string类型的路径
2. 也可以是一个对象，对象中包含path,query,params等信息
  可选的第三个参数：next（不推荐使用）
- 在Vue2中我们是通过next函数来决定如何进行跳转的；
- 但是在Vue3中我们是通过返回值来进行控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；

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

我们一起来看一下完整的导航解析流程：