Vue再学习13——路由

路由的基本使用

暴露一个路由器

 路由使用router中路由和这里和a标签不一样！注意对比。router-link是对a标签的封装

router-link做跳转，由router-view指定展示的位置。

在每个页面中持有route和router对象，route是各自的，router是全局的

 

嵌套（多级）路由

 通过children来添加子路由，对于子路由的path，不需要添加斜杠，因为内部已经做好了

路由query传参

这里可以用url传参，也可以通过query进行封装传参。

通过$route.query.进行参数获取

 

路由命名

路由命名可以简化跳转

在跳转时通过name来确定往哪跳

路由params参数

方法1

方法2

通过路由占位符传参，数据存储在params中

 注意，对于路由params传参，是不能使用path的，只能用name

路由props

普通props使用：

我们这里把props写死：

1、设置props：

2、接收props：

动态的props

1、把所有params中的参数转为props

 2、在props中直接使用

props函数

在之前的动态props中只能接收params的参数转为props，对于query，我们可以采用函数的方式在props中转化

采用解构赋值的方式进行赋值

路由跳转方式

对于路由来说有两种方式进行跳转：

Push，replace（一个是压入栈中，一个是替换当前路由栈中的路由）

编程式路由导航

1、路由栈的压栈和替换

 内部设置和router-link是一样的

2、路由栈的回退和上一步

3、通过步骤确定跳战到哪里

缓存路由组件

通过keep-alive保存路由中的组件不被销毁，但是这样太浪费内存。

通过include包含组件的的name，来确定哪些组件需要缓存。

是这里的name

 缓存多个的话，用数组

路由组件特有生命周期钩子

缓存的路由组建，在切换的时候，调用

路由守卫

前置路由收尾

只有满足一定的要求的路由才能进行跳转，一般用于权限访问。

路由守卫是全局的，他的调用一般是在跳转之前做校验

 跳转限制可以这么写为了更好地对路由进行过滤，我们可以在路由中定义一些属性。在meta中可以加入我们自定义的属性 后置路由守卫 后置路由收尾作用：做一些路由跳转的兜底工作，比如网页title的修改，只有跳转成功的才能进行修改

 

 

独享路由守卫

单独一个路由再切换时调用 ，只有进入前，没有进入后

 

组件内路由守卫

必须是通过路由进入才能触发

 

 

url的 hash模式和history模式

 

当带有#时，说明路由开启了hash模式，#后的值不做为路径给到服务器

当进入history模式，路径中不带#

通过VueRouter中的mode进行开关

 

对于hash模式，其兼容性要高于history模式。

Eg：网页的刷新，对于hash模式，没有影响，因为#后的都是hash值，服务器不解析。但是对于history模式，则需要解析，在跳转多个路由之后，history会去请求路径对应的静态数据，但是并不存在

其他：

vue打包

在服务器中，运行的前端页面是不带.vue开头的文件的，都是css，js，html。所以通过执行npm run build，进行打包，将.vue转为标准网页然后打包。

对于vue的打包，只关注src中的内容。