什么是路由?
设备和ip的映射关系
接口和服务的映射关系
路径和组件的映射关系
为何使用路由
单页面应用(SPA):所有功能在一个html页面上实现
前端路由作用:实现业务场景切换
优点:
- 整体的页面都是不刷新
- 数据传输容易,运行效率高
缺点:
- 开发成本高
- 首次加载会比较慢一点,不利于seo优化
组件分为那两类:
页面组件 页面展示配合路由使用
复用组件
vue-router使用(步骤):
1.下载vue-router模块到当前工程
```
yarn add vue-router
```
2.在main.js中引入VueRouter函数
```js
import vueRouter from 'Vue-router'
```
3.在Vue.use()升上-注册全局RouterLink和RouterView组件
```js
Vue.use(vueRouter)
```
4.创建路由规则数据-路劲和组件名对应关系
例如:
let routes=[{
path:'/my',
component:''//先引入组价再把组件放这
}]
5.用规则生成路由对象
let router=new VueRouter({
routes:声明的路由规则名
})
6.把路由对象注入到new Vue实例中
```
new Vue({
router:路由对象
})
```
7.用router-view作为挂载点,切换不同的页面
使用<router-view></router-view>占位
声明式导航:
可用组件router-link来代替a标签
- vue-router提供了一个全局组件router-link
- router-link实质上最终会渲染成a链接同时性等价于提供href属性 (to无需#)
- router-link提供了声明式导航高亮的功能(自带类名)
//接收参数
接 $route.query.属性名 query传
接 $route.params.属性名 params传
重定向: 用redirect配置项,值为强制切换
404匹配规则:path:"*"
component:NotFound
路由模式:hash / history
hash:路径上有#
history:
编程式导航:
路由跳转
this.$router.push({
path:'路由路径',
name:"路由名字",
//传参
query:{
"参数名":值
},
params:{
"参数名":值
}
})
传参:
推荐使用name+params或name+query传参数
//接收参数
接 $route.query.属性名 query传
接 $route.params.属性名 params传
路由嵌套和守卫:
二级路由如何配置:
创建需要的耳机页面组件
路由规则里children中配置二级路由规则对象
一级页面中设置router-view显示二级路由页面
二级路由要注意什么?
二级路由path一般不写跟路径/
自动添加的2个类名的区别?
router-link-exact-active-url的hash值和href完全匹配
router-link-active-url的hash值包含href路径匹配
路由守卫:
路由跳转之前,会触发一个函数 叫前置守卫
语法:
router.beforeEach((to,from,next)=>{})
to:到哪里去,
from:从哪里来
next:next函数,调用这个函数是否放行
next支持传入跳转对象类似push({})
组件的缓存:
Vue内置的keep-alive组件 包起来要频繁要切换的组件
新的钩子函数:
activated(){},//已激活,被缓存的组件激活时触发钩子
deactivated(){} //取消激活状态 必须要放在keep-alive里面才能触发
匹配缓存:
语法:
-
keep-alive组件的include舒心和exclude舒心
- 先给对应组件设置name属性名
- 再把名字填写到include/exclude位置
-
include(包含-缓存)
-
exclude(不包含-不缓存)
