目前前端流行的三大框架, 都有自己的路由实现:
Angular的ngRouter
React的ReactRouter
Vue的vue-router
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得非常容易。
目前Vue路由最新的版本是4.x版本。
vue-router是基于路由和组件的
路由用于设定访问路径, 将路径和组件映射起来.
在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.
安装Vue Router:
npm install vue-router@4
路由的使用步骤
使用vue-router的步骤:
第一步:创建路由组件的组件;
第二步:配置路由映射: 组件和路径映射关系的routes数组;
第三步:通过createRouter创建路由对象,并且传入routes和history模式;
第四步:使用路由: 通过<router-link>和<router-view>;
路由的默认路径
我们这里还有一个不太好的实现:
默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容;
但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以;
如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?
我们在routes中又配置了一个映射:
path配置的是根路径: /
redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.
hash模式,网址中有#连接
history模式
另外一种选择的模式是history模式:
router-link事实上有很多属性可以配置:
to属性:
是一个字符串,或者是一个对象
replace属性:(正常路由跳转是一个push压栈的过程,返回还会返回来时的页面,replace就会没有这个压栈的形式,返回上一层会返回到空页面,用的很少)
设置 replace 属性的话,当点击时,会调用 router.replace(),而不是 router.push();
active-class属性:
设置激活a元素后应用的class,默认是router-link-active
exact-active-class属性:
链接精准激活时,应用于渲染的 <a> 的 class,默认是router-link-exact-active;
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载:
如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会
更加高效;
也可以提高首屏的渲染效率;
其实这里还是我们前面讲到过的webpack的分包知识,而Vue Router默认就支持动态来导入组件:
这是因为component可以传入一个组件,也可以接收一个函数,该函数 需要放回一个Promise;
而import函数就是返回一个Promise;
打包效果分析
我们看一下打包后的效果:
我们会发现分包是没有一个很明确的名称的,其实webpack从3.x开始支持对分包进行命名(chunk name):
路由其他属性
name: 路由名字,路有记录独一无二的名字
meta:给路由配置一些自己的属性,自定义数据
const routes = [
{
path: "/",
redirect: "/home"
},
// /home/shops
{
path: "/home",
name: "home",
component: () => import(/* webpackChunkName: "home-chunk" */"../pages/Home.vue"),
meta: {
name: "why",
age: 18,
height: 1.88
},
动态路由基本匹配
很多时候我们需要将给定匹配模式的路由映射到同一个组件:
例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但是用户的ID是不同的;
在Vue Router中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数;
在router-link中进行如下跳转:
获取动态路由的值
那么在User中如何获取到对应的值呢?
在template中,直接通过 $route.params获取值;
在created中,通过 this.$route.params获取值;
在setup中,我们要使用 vue-router库给我们提供的一个hook useRoute;
该Hook会返回一个Route对象,对象中保存着当前路由相关的值;
匹配多个参数
对于哪些没有匹配到的路由,我们通常会匹配到固定的某个页面
比如NotFound的错误页面中,这个时候我们可编写一个动态路由用于匹配所有的页面;
{
path: "/:pathMatch(.*)",
component: () => import("../pages/NotFound.vue")
}
![](https://i-blog.csdnimg.cn/blog_migrate/b567215c92c9fe20e60c73d3ac75cbb0.png)
这里还有另外一种写法:
注意:我在/:pathMatch(.*)后面又加了一个 *;
它们的区别在于解析的时候,是否解析 /:
路由的嵌套
什么是路由的嵌套呢?
目前我们匹配的Home、About、User等都属于底层路由,我们在它们之间可以来回进行切换;
但是呢,我们Home页面本身,也可能会在多个组件之间来回切换:
比如Home中包括Product、Message,它们可以在Home内部来回切换;
这个时候我们就需要使用嵌套路由,在Home中也使用 router-view 来占位之后需要渲染的组件;
代码的页面跳转
有时候我们希望通过代码来完成页面的跳转,比如点击的是一个按钮:
<button @click="jumpToAbout">关于</button>
<button @click="forwardOneStep">前进一步</button>
<script>
//在setup中编写的代码,那么我们可以通过 useRouter 来获取:
import { useRouter } from 'vue-router'
export default {
name: 'App',
methods: {
jumpToAbout() {
// router
this.$router.push("/about")
}
},
setup() {
const router = useRouter();
const jumpToAbout = () => {
router.push("/about")
//我们也可以传入一个对象,也可以添加参数
router.push({
path: "/about",
query: {
name: "why",
age: 18
}
})
router.replace("/about")
}
const forwardOneStep = () => {
router.go(1)
router.go(-1)
router.forward()
router.back()
}
return {
jumpToAbout,
forwardOneStep
}
}
}
</script>
}
</script>
我们也可以通过query的方式来传递参数:
![](https://i-blog.csdnimg.cn/blog_migrate/f12eb05c778e3143c9ef6fb6bc2671a3.png)
在界面中通过 $route.query 来获取参数:
<h2>About: {{$route.query.name}}-{{$route.query.age}}</h2>
使用push的特点是压入一个新的页面,那么在用户点击返回时,上一个页面还可以回退,但是如果我们希望当前页面是一个替换操作,那么可以使用replace:
页面的前进后退
router的go方法
router也有back:
通过调用 history.back() 回溯历史。相当于 router.go(-1);
router也有forward:
通过调用 history.forward() 在历史中前进。相当于 router.go(1);