叮咚:✨✨✨
提升自己,比仰望别人更有意义!!!
坚定自己的方向!去开拓打磨另一个自己!!!
此文章只是自己的理解!!!不喜勿喷!喜欢就给个赞哦!!!
希望各位互相监督,共同进步!共同致富!!!
VueRouter
一,路由简介
1,vue-router 的理解
vue的一个插件库,专门用来实现SPA单页面应用
(1)生活中的路由:
(2)开发中的路由 ———— 单页面应用 SPA (single page web application)应用
(3)对SPA应用的理解
1 - 单页面web应用(single page web application )
2 - 整个应用只有一个完整的页面index.html
3 - `点击页面中的导航链接不会刷新页面, 只会做页面的局部刷新`
4 - 数据需通过ajax请求获取
2,什么是路由?
一个路由就是一组映射关系key : value
key为路径, value 可能是function 或 component
3,路由分类
(1)后端路由
value 是 function ,用于处理客户端提交的请求
工作过程:服务器就收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
(2)前端路由
value 是 component , 用于展示页面内容
工作过程:当浏览器的路径发生改变时,对应的组件就会显示
二,路由基本使用
1,安装vue-router, 命令 npm i router
2,应用插件: Vue.use(VueRouter)
3,编写router配置项
(1)引入VueRouter (router/index.js)
import VueRouter from 'vue-router
(2)引入组价
import XXX from '../XXX/XXX'
import XXX from '../XXX/XXX'
(3)创建router实例对象,去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'XXX',
component:组件1
},
{
path:'XXX',
component:组件2
}
]
})
(4)暴露router
export default router
4,在mian.js引入路由器,并挂载 到 vm身上
import router from 'XXX'
new Vue ({
el:'#app',
render:h=>h(App),
`router`
})
5,实现切换(active-clss可配置高亮样式)
<router-link class="list-group-item" `active-class="active"`to="/home">Home</router-link>
6,指定路由页面展示位置用: <router-view> </router-view>
7,vue-router 的注意点:
(1)路由组件通常存放在pages 文件夹,一般组件通常存放在 components 文件夹。
(2)通过切换,隐藏了的路由组件,默认是被销毁的,需要的时候再去挂载
(3)每个组件都有自己的$route 属性,里面存储着自己的路由信息
(4)整个应用只有一个 router ,可以通过组件的$router 属性获取到
三,多级路由(二级路由)
四,声明式导航 及 路由传参
1,query 方式携带参数(router-link + to)
to 字符串写法:
<router-link `:to="`/home/message/detail?id=${m.id}&title=${m.title}`"`>{{m.title}</router-link>
to 对象写法:
<router-link `:to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
} } " `> {{m.title}}</router-link>
接收参数:
$route.query.id
$route.query.title
2,命名路由:顾名思义给路由起名字
3,params 式携带参数 (router-link + to)
to 字符串写法:
<router-link `:to="`/home/message/detail/${m.id}/${m.title}`"`> {{m.title}}</router-link>
to 对象写法:
<router-link `:to="{
name:'detail',
params:{
id:m.id,
title:m.title
}
}`"> {{m.title}}</router-link>
接收参数:
$route.params.id
$route.params.title
五, 路由的 props 配置 ———— 让路由组件更加方便的接收参数
六,router-link 的 replace 属性
七,编程式导航
八、缓存组件 keep - alive
九、两个新的生命周期钩子
作用: 路由组件所独有的两个钩子,用于捕获路由组件的激活状态
具体名字:
activated 路由组件 被激活时触发
deactivated 路由组件失活时被触发
十、路由守卫
1,全局 ———— 前置路由守卫 beforeEach
作用: 对路由进行权限的控制
分类: 全局守卫, 独享守卫, 组件内守卫
2,全局 ———— 后置路由守卫 afterEach
3,独享 路由守卫 —— 某一个路由所单独使用的路由守卫 beforeEnter
———— 可以搭配全局后置路由守卫一起使用。
、
4,组件内路由守卫
beforeRouteEnter : 通过路由规则,进入该组件时被调用
beforeRouteLeave : 通过路由规则, 离开该组件时被调用
十一、路由器工作的两种模式: history 模式 和 hash 模式
(1)对于一个url 来说,什么是hash 值?
# 号后面的内容就是 hash 值
(2)hash 值不会包含在 HTTP 请求中, 所以 hash 值不会带给服务器
(3)hash 模式:
1- 地址中永远带着 # 号,不美观
2- 若以后将地址通过第三方手机APP分享,若APP校验严格则地址会被标记为不合法
3- 兼容性较好
(4)history 模式:
1- 无#号 地址干净,美观
2- 兼容性和hash 模式相比略差
3- 应用部署上线时需要后端人员支持,解决刷新页面服务端404问题