Vue Router 和 常用组件库

一、缓存路由组件

作用: 让不展示的路由组件保持挂在,不被销毁

代码:

<keep-alive include="xxx">
  <router-view></router-view>
</keep-alive>

二、两个新的生命周期钩子

作用: 路由组件所独有的两个钩子,用于捕获路由组件的激活状态(需配合keep-alive标签使用)

钩子函数:

1. activated: 路由组件被激活时触发

2. deactivated: 路由组件失活时触发

三、路由守卫

作用: 对路由进行权限控制

分类: 全局守卫、独享守卫、组件内守卫

全局守卫

独享路由守卫(只存在beforeEnter钩子函数)

组件内守卫

四、路由器的两种工作模式

(1) 对于一个url来说,什么是hash值: #及其后面的内容就是hash值

(2) hash值不会包括在http请求中,即hash值不会带给服务器

(3) hash模式:

1. 地址中永远带着#值,不美观

2. 若以后将地址通过第三方手机app分享,若app检验严格,则地址会被标记为不合法

3. 兼容性较好

(4) history模式

1. 地址干净,美观

2. 兼容性和hash模式相比略差

3. 应用部署上线时需要后端人员支持,解决刷新页面服务器端404问题

五、Vue UI 常用组件库

1、PC端

1.1 Element UI

1.3 Element Plus

1.2 IView UI

2、移动端

2.1 Vant