路由其实是网络工程中的一个术语:
路由的概念在软件工程中出现,最早是在后端路由中实现的,原因是web的发展主要经历了这样一些阶段:
早期的网站开发整个HTML页面是由服务器来渲染的.。服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.
但是, 一个网站, 这么多页面服务器如何处理呢?
上面的这种操作, 就是后端路由:
后端路由的缺点:
前端渲染的理解:
前后端分离阶段:
前端路由是如何做到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>
history接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面:
pushState()
需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容:
状态对象 — 状态对象state是一个JavaScript对象,通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态,popstate事件就会被触发,且该事件的state属性包含该历史记录条目状态对象的副本。
状态对象可以是能被序列化的任何东西。原因在于Firefox将状态对象保存在用户的磁盘上,以便在用户重启浏览器时使用,我们规定了状态对象在序列化表示后有640k的大小限制。如果你给 pushState()
方法传了一个序列化后大于640k的状态对象,该方法会抛出异常。如果你需要更大的空间,建议使用 sessionStorage
以及 localStorage
.
标题 — Firefox 目前忽略这个参数,但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者,你可以为跳转的state传递一个短标题。
URL — 该参数定义了新的历史URL记录。注意,调用 pushState()
后浏览器并不会立即加载这个URL,但可能会在稍后某些情况下加载这个URL,比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径,那么它将被作为相对于当前URL处理。新URL必须与当前URL同源,否则 pushState()
会抛出一个异常。该参数是可选的,缺省为当前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 Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得非常容易。
目前Vue路由最新的版本是4.x版本.
vue-router是基于路由和组件的
路由用于设定访问路径, 将路径和组件映射起来.
在vue-router的单页面应用中, 页面的路径的改变就是组件的切换
安装vue-router
# 安装 4.x
npm install vue-router@4
使用vue-router的步骤:
和
;// 路由的配置规则
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
当然这样在地址栏输入地址是比较麻烦的。
所以我们可以使用
组件来进行路由的切换。
我们这里还有一个不太好的实现:
默认情况下, 进入网站的首页, 我们希望渲染首页的内容;
但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以;
如何可以让路径默认跳到到首页, 并且渲染首页组件呢?
我们在routes中又配置了一个映射:
默认情况下,根路径没有匹配到组件。所以不会显示其他的组件。
这时,我们可以在路由规则中,配置一下根路径的重定向,让其重定向到/home路径下。
这样即使访问的是根路径,也会进行重定向到/home这个路由。
上面的代码的测试,路径URL都是采用的hash模式。接下来我们将使用history模式。
这种地址看起来更加真实。
router-link事实上有很多属性可以配置:
to属性:
replace属性:
active-class属性:
exact-active-class属性:
<div>
<router-link to="/home" :replace="true">首页homerouter-link>
<router-link to="/about" :replace="true">关于aboutrouter-link>
<router-view>router-view>
div>
一旦设置该属性,就不能进行路由的返回了。
当我们点击某个组件的时候,vue会默认在上面添加两个class样式。类名默认是router-link-active 和 router-link-exact-active
**激活的router-link具有某种样式,有助于我们进行设置。**比如我们可以把激活的那个组件的样式进行更改。
当然active-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>
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载:
其实这里还是我们前面讲到过的webpack的分包知识,而Vue Router默认就支持动态来导入组件:
// 路由规则,映射关系
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")
}
]
我们看一下打包后的效果:
我们会发现分包是没有一个很明确的名称的,其实webpack从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")
}
]
没有进行懒加载时的打包效果:
组件懒加载后的分包效果:(这里的分包我指定了名称,不使用魔法注释的话其实我们是无法分辨分出来的包对应哪一个文件)
name属性:路由记录独一无二的名称;
meta属性:自定义的数据
{
path: "/home",
// name 属性 给这个路由起名字 我们进行路由的跳转的时候
// 也可以通过name属性的值 进行页面的跳转
name: "home",
// 还可以使用 meta属性 配置一些元数据
meta: {
name: "毛毛",
age: 21,
gender: "男"
},
component: () => {
return import(/* webpackChunkName:"home-chunk" */"../pages/Home.vue");
}
}
很多时候我们需要将给定匹配模式的路由映射到同一个组件:
例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但是用户的ID是不同的;
在Vue Router中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数;
// 动态路由,有时候我们希望这个路由的路径不是写死的
// 比如那个用户登录 就在后面显示那个用户 /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);
}
// 通过获取该函数的返回值,可以拿到当前要显示的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")
}
对于哪些没有匹配到的路由,我们通常会匹配到固定的某个页面
比如NotFound的错误页面中,这个时候我们可编写一个动态路由用于匹配所有的页面;
{ // TODO 这个路由的匹配规则优先级最低 只有其他路由匹配不到才会匹配这个 // 当匹配不到其他所有的路由的时候,就会匹配这个路由 // 这个写法可以匹配所有的路由路径 // patchMatch() 路径匹配 // ()里面的是正则表达式 path: "/:patchMatch(.*)", component: NotFound }
这里还有另外一种写法:
*注意:我在/:pathMatch(.*)后面又加了一个 ;
{
// 如果在patchMatch()函数后面再加上一个 *
// 会把我们当前匹配到的路径按照 / 进行分割,放到数组里面
// 也就是通过 $route.params.patchMatch 获取到的地址变成了数组
// /a/b/c ---> ['a','b','c']
path: "/:patchMatch(.*)*",
component: () => import("../pages/NotFound.vue")
}
它们的区别在于解析的时候,是否解析 /:
什么是路由的嵌套呢?
目前我们匹配的Home、About、User等都属于底层路由(也可以叫做一级路由),我们在它们之间可以来回进行切换;
但是呢,我们Home页面本身,也可能会在多个组件之间来回切换:
这个时候我们就需要使用嵌套路由,在Home中也使用 router-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" }
]
}
active-class,只要当前的路由匹配实际地址栏的地址的一部分,也就是路由嵌套的时候,访问的是子路由地址,实际上父路由也算是被访问了。这时候active-class就会加在父路由的那个
上,也会加在子路由的那个标签上。
而exact-active-class只有精准匹配的时候,才会加在对应路由的那个标签上。也就是只会加在发生路由嵌套的的子路由上。
有时候我们希望通过代码来完成页面的跳转,比如点击的是一个按钮:
当然,我们也可以传入一个对象:
如果是在setup中编写的代码,那么我们可以通过 useRouter 来获取:
我们也可以通过query的方式来传递参数:
在界面中通过 $route.query 来获取参数:
使用push的特点是压入一个新的页面,那么在用户点击返回时,上一个页面还可以回退,但是如果我们希望当前 页面是一个替换操作,那么可以使用replace:
简单来说就是没办法回到上个页面
声明式 | 编程式 |
---|---|
router.replace(地址) |
当然,想要完成这个效果,首页页面的地址栏是有历史记录的地址的。只有可以前进和后退,才能完成我们需要的效果。
router的go方法:可以完成back和forward两个方法的效果。
router也有back:通过调用 history.back() 回溯历史。相当于 router.go(-1);
router也有forward:通过调用 history.forward() 在历史中前进。相当于 router.go(1);
// 前进
const goToOneStep = () => {
// 前进几条地址记录 二者等价 也可以是 -1 表示后退几条历史记录
// router.go(1)
router.forward(1)
}
// 后退
const backOneStep = () => {
// 后退几条历史记录
// router.back(1)
// 使用 go(-n) 也可以达到回退历史记录的效果
router.go(-1)
}
即使给back方法传递负数,也不会达到前进的结果。还是一样是后退。应该是内部做了转换。
在vue-router3.x的时候,router-link有一个tag属性,可以决定router-link到底渲染成什么元素:
v-slot如何使用呢?
首先,我们需要使用custom表示我们整个元素要自定义:
其次,我们使用v-slot来作用域插槽来获取内部传给我们的值:
<router-link to="/home" v-slot="props" custom>
<button @click="props.navigate">首页homebutton>
<button>哈哈哈 我不会跳转的button>
<div>
<span>{{ props.href }}span>
<br />
<span>{{props.isActive}}span><br>
<span>{{props.isExactActive}}span>
div>
router-link>
<router-link to="/about">
<nav-bar title="关于about">nav-bar>
router-link>
<router-link to="/user/mao/1">用户userrouter-link>
<router-view>router-view>
router-view也提供给我们一个插槽,可以用于 和 组件来包裹你的路由组件:
某些情况下我们可能需要动态的来添加路由:
如果我们是为route添加一个children路由,那么可以传入对应的name:
// 定义好动态的路由
const categoryRoute = {
path: "/category",
component: () => import(/* webpackChunkName:"category-chunk" */"../pages/Category.vue")
}
// 动态添加路由 ,调用路由对象router的addRouter方法
// 该方法添加的路由为顶级路由
router.addRoute(categoryRoute);
const homeMomentRoute = {
path: "moment",
component: () => import("../pages/HomeMoment.vue")
}
// 添加二级路由
// 参数一:父路由的name属性值 参数二:被添加的路由
router.addRoute("home", homeMomentRoute);
删除路由有以下三种方式:
// 定义好动态的路由
const A = {
path: "/category",
component: () => import("../pages/A.vue")
}
const B = {
path: "/category",
component: () => import("../pages/B.vue")
}
// 添加路由
router.addRoute(A);
// 再次添加相同路径的的路由,会替换调原来的路由
router.addRoute(B);
// 删除路由 删除路由名字name为home的路由
router.removeRoute("home")
// 调用addRouter的回调函数删除路由
const removeRoute = router.addRoute(B);
removeRoute()// 删除我们添加的这个路由,如果路由存在的话
路由的其他方法补充:
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
全局的前置守卫beforeEach是在导航触发时会被回调的:
它有两个参数:
它有返回值:
可选的第三个参数:next
// 比如用户未登录的情况下,
// 我们不应该可以去往用户界面(这个路由应该不能访问)
// beforeEach 路由前置导航守卫 路由跳转前执行
/*
to 和 from 参数 都是route对象 都是路由
to: 要去的目标路由
from: 从哪个路由跳转来的
next: 进行路由的放行,vue3/vue-router4.x版本 中不在建议使用,所以也别传递该参数了
*/
// router.beforeEach((to, from, next) => {
router.beforeEach((to, from) => {
console.log(to);
// console.log(to.path);
console.log(from);
// next()
// 在没有next参数的情况下,
// 返回值为true,表示允许路由之间的跳转 进行导航
// 返回值为false 表示不允许路由之间的跳转 不进行导航
// 返回值为undefined或者无返回值 进行默认导航,相当于这里面的代码没有任何作用
// 返回值为字符串(表示一个路由的路径):去会去往这个返回的路劲
// 返回值是一个对象,当然必须包含path属性,也可以有query,等属性
// 比如: {path:"/home",query:{name:"毛毛"}}
// return true;
if(to.path.indexOf("/home")!==-1){return "/about"}
return true;
})
Vue还提供了很多的其他守卫函数,目的都是在某一个时刻给予我们回调,让我们可以更好的控制程序的流程或者功能:
vue-router
我们一起来看一下完整的导航解析流程: