Vue-Router4.x必知必会--万字肝文
文章目录 vue- 路由懒加载 路由的其他属性动态路由 匹配多个参数匹配规则加* 路由的嵌套 编程式导航 -link的v--view的v-slot动态添加路由动态删除路由路由导航守卫其他导航守卫
有兴趣也可以看看我的vue3笔记
Vue3学习之旅–-API-进阶篇
小程序笔记
微信小程序入门之旅-第六天-自定义组件及的使用-制作电影页面 Vue- 什么是路由 认识前端路由
路由其实是网络工程中的一个术语：
路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：
后端路由阶段
早期的网站开发整个HTML页面是由服务器来渲染的.。服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.
但是, 一个网站, 这么多页面服务器如何处理呢?
上面的这种操作, 就是后端路由：
后端路由的缺点:
前后端分离阶段
前端渲染的理解：
前后端分离阶段：
URL的hash
前端路由是如何做到URL和内容进行映射呢？监听URL的改变。
URL的hash
hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。
<div id="app"><a href="#/home">homea><a href="#/about">abouta><div id="router-view">div>div><script>const routerView = document.querySelector('#router-view');// url的hash// URL的hash也就是锚点，本质上就是改变window.location 的 href 属性// 我们可以通过直接赋值location.hash 来改变 href 但是页面不会刷新window.addEventListener('hashchange',()=>{console.log(location.hash);if(location.hash==="#/home"){routerView.innerHTML = "home";}else if(location.hash==="#/about"){routerView.innerHTML = "about";}})script>
HTML5的
接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面：
HTML5的测试
() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容：
<div id="app"><a href="home">homea><a href="about">abouta><div id="router-view">div>div><script>const routerView = document.querySelector('#router-view');const as = document.querySelectorAll('a');const arr = Array.from(as);arr.forEach(item => {item.addEventListener('click', event => {event.preventDefault();// pushState() 需要三个参数: 一个状态对象,// 一个标题 (目前被忽略), 和 (可选的) 一个URL. //history.pushState({}, "", item.getAttribute("href"));history.replaceState({}, "", item.getAttribute("href"));historyChange()})})function historyChange() {// location.pathname 项目根路径开始的虚拟地址console.log(location.pathname.slice(location.pathname.lastIndexOf("/")));switch (location.pathname.slice(location.pathname.lastIndexOf("/"))) {case "/home":routerView.innerHTML = "home";break;case "/about":routerView.innerHTML = "about";break;default:routerView.innerHTML = "default";break;}}window.addEventListener('popstate',historyChange);window.addEventListener('go',historyChange);
script>
vue- 认识vue-
目前前端流行的三大框架, 都有自己的路由实现:
Vue 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。
目前Vue路由最新的版本是4.x版本.
vue-是基于路由和组件的
安装vue-
# 安装 4.x
npm install vue-router@4
路由的使用步骤
使用vue-的步骤:
路由的基本使用流程
// 路由的配置规则
import About from "../pages/About.vue"
import Home from "../pages/Home.vue"
// 导入vue-router
// 导入创建路由对象的函数，以及路由方式的函数
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';// 路由规则,映射关系
const routes = [{ path: "/home", component: Home },{ path: "/about", component: About }
]
// 路由对象，管理路由的映射
const router = createRouter({routes,// 指定路由使用的模式 这里指定使用history路由 不使用hash模式了//history: createWebHashHistory(),history: createWebHistory(),
});// 导出路由
export default router;
在浏览器输入地址/home
当然这样在地址栏输入地址是比较麻烦的。
所以我们可以使用组件来进行路由的切换。
路由的默认路径
我们这里还有一个不太好的实现:
如何可以让路径默认跳到到首页, 并且渲染首页组件呢?
我们在中又配置了一个映射：
默认情况下，根路径没有匹配到组件。所以不会显示其他的组件。
这时，我们可以在路由规则中，配置一下根路径的重定向，让其重定向到/home路径下。
这样即使访问的是根路径，也会进行重定向到/home这个路由。
模式
上面的代码的测试，路径URL都是采用的hash模式。接下来我们将使用模式。
这种地址看起来更加真实。
-link
-link事实上有很多属性可以配置：
属性：
-class属性：
exact--class属性：
<div><router-link to="/home" :replace="true">首页homerouter-link><router-link to="/about" :replace="true">关于aboutrouter-link><router-view>router-view>div>
一旦设置该属性，就不能进行路由的返回了。
-class、exact--class
当我们点击某个组件的时候，vue会默认在上面添加两个class样式。类名默认是-link- 和 -link-exact-
**激活的-link具有某种样式，有助于我们进行设置。**比如我们可以把激活的那个组件的样式进行更改。
当然-class属性可以修改激活路由具有的类名。
<router-link to="/home" active-class="mao-active">首页homerouter-link><router-link to="/about" active-class="mao-active">关于aboutrouter-link><router-view>router-view>
路由懒加载
当打包构建应用时， 包会变得非常大，影响页面加载：
其实这里还是我们前面讲到过的的分包知识，而Vue 默认就支持动态来导入组件：
// 路由规则,映射关系
const routes = [// { path: "/", component: Home },// 访问根路径的时候，进行路由的重定向 redirect{ path: "/", redirect: "/home" },// 路由的懒加载 实现懒加载 我们只需要让component属性的值设置为一个函数// 这个函数的返回值是一个promise对象，且也有这个路由匹配的组件{path: "/home", component: () => {// 使用import函数加载文件 // import函数的返回值本身就是一个promise对象// 当我们这样配置以后，在使用webpack打包的时候，会自动帮我们进行分包的操作// 只有用到这些组件的时候，或者说这些路由激活以后，// 才会发起请求获取对应的组件数据return import("../pages/Home.vue");}},{path: "/about",component: () => import("../pages/About.vue")}
]
打包效果分析
我们看一下打包后的效果：
我们会发现分包是没有一个很明确的名称的，其实从3.x开始支持对分包进行命名（chunk name）：
const routes = [// { path: "/", component: Home },// 访问根路径的时候，进行路由的重定向 redirect{ path: "/", redirect: "/home" },// 路由的懒加载 实现懒加载 我们只需要让component属性的值设置为一个函数// 这个函数的返回值是一个promise对象，且也有这个路由匹配的组件{path: "/home", component: () => {// 使用import函数加载文件 // import函数的返回值本身就是一个promise对象// 当我们这样配置以后，在使用webpack打包的时候，会自动帮我们进行分包的操作// 只有用到这些组件的时候，或者说这些路由激活以后，// 才会发起请求获取对应的组件数据return import(/* webpackChunkName:"home-chunk" */"../pages/Home.vue");}},{path: "/about",// TODO webpack特性// 如果我们想在webpack打包的时候，// 给我们用到的分包管理的路由组件文件 起名字// 那么就用到了 魔法注释// 格式 /**/// 我们在import函数的括号前使用这个魔法注释// 这个注释会被webpack解析的，不能乱写component: () => import(/* webpackChunkName: "about-chunk" */"../pages/About.vue")}
]
没有进行懒加载时的打包效果：
组件懒加载后的分包效果：（这里的分包我指定了名称，不使用魔法注释的话其实我们是无法分辨分出来的包对应哪一个文件）
路由的其他属性
{path: "/home",// name 属性 给这个路由起名字 我们进行路由的跳转的时候// 也可以通过name属性的值 进行页面的跳转name: "home",// 还可以使用 meta属性 配置一些元数据meta: {name: "毛毛",age: 21,gender: "男"},component: () => {return import(/* webpackChunkName:"home-chunk" */"../pages/Home.vue");}}
动态路由 动态路由基本匹配
很多时候我们需要将给定匹配模式的路由映射到同一个组件：
// 动态路由，有时候我们希望这个路由的路径不是写死的// 比如那个用户登录 就在后面显示那个用户 /user/mao{// 动态路由需要在地址上动态传递参数path: "/user/:username",component: User}
<router-link to="/user/mao">用户userrouter-link>
获取动态路由的值
// 在组件创建完毕后 就可以拿到动态路由的参数created() {// 使用 this.$route 就可以拿到当前匹配的路由 获取地址等// 甚至这个参数里面还可以获取到查询字符串// 也可以获取到我们在前面路由中定义的 name，meta等属性的值console.log(this.$route);// params 就是我们的动态路由的参数console.log(this.$route.params);}
setup
// 通过获取该函数的返回值，可以拿到当前要显示的route路由规则对象
import { useRoute } from "vue-router"
setup() {const route = useRoute()console.log(route);console.log(route.params.username);// mao}
匹配多个参数
{// 动态路由需要在地址上动态传递参数path: "/user/:username/:id",component: () => import("../pages/User.vue")}
对于哪些没有匹配到的路由，我们通常会匹配到固定的某个页面
比如的错误页面中，这个时候我们可编写一个动态路由用于匹配所有的页面；
{ // TODO 这个路由的匹配规则优先级最低 只有其他路由匹配不到才会匹配这个 // 当匹配不到其他所有的路由的时候，就会匹配这个路由 // 这个写法可以匹配所有的路由路径 // patchMatch() 路径匹配 // ()里面的是正则表达式 path: "/:patchMatch(.*)", component: NotFound }
匹配规则加*
这里还有另外一种写法：
*注意：我在/:(.*)后面又加了一个 ；
{ // 如果在patchMatch()函数后面再加上一个 *// 会把我们当前匹配到的路径按照 / 进行分割，放到数组里面// 也就是通过 $route.params.patchMatch 获取到的地址变成了数组// /a/b/c ---> ['a','b','c']path: "/:patchMatch(.*)*",component: () => import("../pages/NotFound.vue")}
它们的区别在于解析的时候，是否解析 /：
路由的嵌套
什么是路由的嵌套呢？
这个时候我们就需要使用嵌套路由，在Home中也使用 -view 来占位之后需要渲染的组件；
{path: "/home",component: () => {return import("../pages/Home.vue");},// 嵌套路由 children 是一个数组 可以有多个子路由children: [// 子路由默认是有父级的地址了 /home/ // 所以这里只需要写自己独有的地址就可以，且不需要 /{ "path": "message", component: () => import("../pages/HomeMessage.vue") },{ "path": "shops", component: () => import("../pages/HomeShops.vue") },// 这里在使用一波重定向，默认访问的是 /home/message// 注意，这里不是 / 这里其实是 "" 空字符{ path: "", redirect: "/home/message" }]}
-class、exact--class
-class，只要当前的路由匹配实际地址栏的地址的一部分，也就是路由嵌套的时候，访问的是子路由地址，实际上父路由也算是被访问了。这时候-class就会加在父路由的那个上，也会加在子路由的那个标签上。
而exact--class只有精准匹配的时候，才会加在对应路由的那个标签上。也就是只会加在发生路由嵌套的的子路由上。
编程式导航 代码的页面跳转
有时候我们希望通过代码来完成页面的跳转，比如点击的是一个按钮：
当然，我们也可以传入一个对象：
如果是在setup中编写的代码，那么我们可以通过 来获取：
query方式的参数
我们也可以通过query的方式来传递参数：
在界面中通过 $route.query 来获取参数：
替换当前的位置
使用push的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退，但是如果我们希望当前 页面是一个替换操作，那么可以使用：
简单来说就是没办法回到上个页面
