路由的模式和区别
1 路由的模式
路由的模式:history、hash
2 路由的区别
区别:
1. 关于找不到当前页面发送请求的问题
history会给后端发送一次(get)请求,这样会给后端造成压力,所以一般会配置一个404的页面
hash则不需要考虑这些问题,它不会给后端发送请求
2. 关于项目打包前端自测问题
hash是可以看到打包完后页面渲染出的内容
history默认情况则是看不到内容的
3. 关于表象不同
hash:url地址中间会生成一个#
history:url地址则会用/来隔开
3 子路由
子路由简示如下:
![](https://i-blog.csdnimg.cn/blog_migrate/c6605c1037449e21ebf0cb4f1ed35845.png)
按上图逻辑,则是App.vue里面使用路由模块包涵Main.vue,然后Main.vue组件里面再次使用了路由模块包涵Home.vue和User.vue来进行切换
组件代码简示如下:
![](https://i-blog.csdnimg.cn/blog_migrate/c4010b68c23847b0e2fe307fff2dfc5f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/aff756b7c5eeb35842e706c919544b80.png)
也可以这样理解
![](https://i-blog.csdnimg.cn/blog_migrate/7506db5f76f2750867f465f0a65bde06.png)
子组件也可以理解为是嵌套组件
4 动态路由
1、 什么是动态路由
1 路由可变,不是写死的,动态加载
2 存储分两种:存前端,存数据库
2、动态路由的好处
十分灵活、无需手动维护、而且增加了安全性
3、动态路由的运作
简而言之就是通过对后端数据的请求,经过守卫拦截和路由添加等处理,把请求到的数据添加到路由当中,然后再渲染到页面之中
一般动态路由用来区分多个登录角色,如管理员和正常用户等
5 $route和$router的区别
$route对象
$route对象:表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。
![](https://i-blog.csdnimg.cn/blog_migrate/4d3ab5ba7fc91b557c3822dae0613e1b.png)
当前路由对象的方法
1、 $route.path :字符串,对应当前路由的路径,总是解析为绝对路径,如"/foo/bar"。
2、$route.params :一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象。
3、$route.query :一个 key/value 对象,表示 URL 查询参数。 例如,对于路径 /foo?user=1,则有 $route.query.user == 1, 如果没有查询参数,则是个空对象。
4、$route.hash : 当前路由的hash值 (不带#) ,如果没有 hash 值,则为空字符串。
5、$route.fullPath : 完成解析后的 URL,包含查询参数和hash的完整路径。
6、$route.matched : 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
7、$route.name :当前路径名字
8、$route.meta : 路由元信息
$router对象
$router对象:是全局路由的实例,是router构造方法的实例。
![](https://i-blog.csdnimg.cn/blog_migrate/dcaddcb7e3d54586f0bff8083a34d8cb.png)
路由实例的方法:(拿home路由举例)
$router.push('home') :直接跳转到home路由界面,此跳转是有历史记录的,使用浏览器的返回按钮是可以返回的
$router.replace('home):此跳转是直接将home路由界面替换了当前页面,而不是跳转到home路由界面,所以是无法返回的
$this.$router.go(x):当x为1的时候是将浏览器页面前进,当x为0的时候是将浏览器页面刷新,当x为-1的时候则是将浏览器页面后退
6 路由传值
第一种方法:$router.push
![](https://i-blog.csdnimg.cn/blog_migrate/11d5117332e5e985a9d55cc8e7ef18e5.png)
对应的路由配置:
![](https://i-blog.csdnimg.cn/blog_migrate/4f8f90102f1c6abc54ae0983cf019969.png)
我们在另外的组件则可以用this.$route.params.id 来获取参数
第二种方法: params传参通过name
![](https://i-blog.csdnimg.cn/blog_migrate/be16f208d0148a52c87980da4531ff9f.png)
对应的路由配置:注意这里不能使用:/id来传递参数了,因为组件中,已经使用params来携带参数了
![](https://i-blog.csdnimg.cn/blog_migrate/3da7fbfd7bdf3db9cf62d42e600b8e34.png)
我们在另外的组件仍可以用this.$route.params.id 来获取参数
第三种方法: query传参通过path跳转
![](https://i-blog.csdnimg.cn/blog_migrate/f783e4e95d64ca3434aca6e73bc35b9f.png)
对应的路由配置:同第二种方法一样
![](https://i-blog.csdnimg.cn/blog_migrate/3da7fbfd7bdf3db9cf62d42e600b8e34.png)
在组件中使用的方法则不一样:this.$route.query.id
tip:
使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?
7 导航故障
一般导航故障产生于当前页面跳当前页面(不是刷新页面),然后配置的路由就容易报错
解决:
import VueRouter from 'vue-router'
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
return routerPush.call(this, location).catch(error => error)
}
主要就是catch(error => error),发现错误并抛出,就不会报错
上面这串代码可插入到main.js中使用
![](https://i-blog.csdnimg.cn/blog_migrate/7edab1ca2b3259af1c04fb12c5b1b0cd.png)
8 导航守卫
1 全局守卫router.beforeEach
当从一个路由跳转到另一个路由的时候触发此守卫,这个守卫也叫全局前置守卫,所以它是跳转前触发的。任何路由跳转都会触发。
![](https://i-blog.csdnimg.cn/blog_migrate/28bd0f4678ca26207d1d6711e73d579e.png)
每个守卫都有三个参数:
to:这是你要跳去的路由对象。
from:这是你要离开的路由对象。
next:是一个方法,它接受参数。这个方法必须调用要不就跳不过去了,你可以把它看做保安。必须给它打个招呼,要不然不让你过。
next()。这就是告诉保安我要过去,去哪里呢? 就是to了。
next(false)。如果传入false。保安就不让过了。也就是中断跳转。
next({path:“/”})。这个意思是保安不让过,并把你交到另一地方审查了。也就是中断跳转,跳转到一个新的路径。
2 全局后置钩子 router.afterEach
![](https://i-blog.csdnimg.cn/blog_migrate/84195cd5c9aae310a33d3bd6a9695b0c.png)
这个钩子它没有next方法,也不会阻止你的跳转,可以用来记录跳转完成后的信息,或者打印一些东西,触发一些互动
3 路由独享守卫 beforeEnter
这个守卫只有在进入相应的路由的时候才会调用,效果跟全局守卫类似,但它值守护有它存在的路由
![](https://i-blog.csdnimg.cn/blog_migrate/b6238e75388174c536d1305c1ddcc5a1.png)
4 组件内守卫 beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
这三个守卫是写在组件里,beforeRouteEnter守卫 不能 访问 this,因为在调用的时候,组件还未被创建出来,其他两个可以访问this
![](https://i-blog.csdnimg.cn/blog_migrate/1a64f3ff43b8d7f9fa7303da18d56853.png)
tip:一般不用组件内守卫,因为不易维护