Vue Router 笔记

leeneo_xingzhihen

已于 2022-03-25 17:28:44 修改

阅读量663

点赞数

分类专栏： Vue 文章标签： javascript typescript github git

于 2022-03-19 13:51:27 首次发布

本文链接：https://blog.csdn.net/weixin_49596144/article/details/123593603

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

所有组件都继承自 vue 的原型

路由的发展

后端路由阶段

Jsp/PHP/Asp时期，后端处理url和页面之间的映射关系，然后由服务器端渲染好HTML代码，返回给客户端展示

前后端分离阶段

jQuery 时期，随着Ajax的出现，出现前后端分离的开发模式。这个时期采用大量由js,jq拼接生成的html代码

前后路由阶段

伴随SPA的出现，用户点击某个操作不在实现整个页面的重载，取而代之的是利用浏览器自身的特性(hash,history)，通过js动态刷新html，从而模拟多个视图的切换

原理：一次从服务器端请求整套的state resource(html+css+js) ，然后点击链接切换视图时，从整套 state resource 里调用该视图的html+css+js

技术：利用 url hash, 和 h5 history 对象

hash

location.hash='home'

h5 history

history.pushState({},'','home')
history.replaceState({},'','home')
pushState replaceState 的区别，repalceState 改变的 url 没有保存历史状态，也就是无法 back() go()
历史状态的返回：history.back(),前进：history.go()
history.go(num); --num:正负整数
history.back();
history.back()=history.go(-1)
history.forward=history.go(1)

vue router

在 vue router 的SPA 中，url的改变就是组件的切换

安装 vue router

1,npm install vue-router --save

2,Vue.use(VueRouter)

vue router 的使用

创建映射到 url 的组件，也就是 vue 组件
配置 url 到组件间的映射
通过在视图中插入<router-link> <router-view> 使用路径映射关系(路由)
视图使用 router-link 是一个vue-router 内部已经注册的组件，它在页面上最终会渲染成一个a标签
router-view 相当<cpn/>，它指示组件加载的区域

更改路由

视图使用 router-link
js中使用 this.$router.push("/about") | this.$router.replace("/about")

路由绑定参数（拼接url）

routes:{path:/user/:uid}
使用v-bind ：<router-link :to="'/user/' + uid"> 绑定参数到 user 视图
user组件拿到 user视图传递的参数：this.$route.params.uid

路由传参

params 方式：

路由配置：{path:/router/:id}

视图：<:router-link :to="'/router/' + uid">

取参：$route.params.uid

形成的链接：/router/123

query 方式：

路由配置：普通配置，不需要加动态值 :id

视图：<router-link :to="{path:'/router',query:{name:'leeneo',age:'28'}}"></router-link>

取参：$route.query | $route.query.name

形成链接：/router?name=leeneo&age=28

事件方式

this.$router.push('/router'+this.uid)

this.$router.push({path:'/router',query:{name:'neo',age:28}})

路由的懒加载

懒加载：用到时方加载
主要作用：将不同路由对应的组件分割成不同的js代码块，只有当路由被访问的时候，才加载对应代码

路由嵌套（分层）

<router-link to="/home/news" tag="button">新闻</router-link>
在要追加层级的组件路由下添加 children --> routes:{Home:{children:[]}}

this.$router this.$route 的区别

this.$router:VueRouter 外层最大的VueRouter对象: this.$router.push()|replace()
this.$route: 当前激活的路由(active of routes)对象，可以访问当前路由的 path,params,query等

全局守卫，勾子函数 router.beforeEach() and router.afterEach

用于在进入页面之前做些限制，比如验证登录权限，比如设置页面title
beforeEach(to,from,next) 需要 next 函数，否则运行会出错
afterEach(to,from) 不需要 next 函数

使用 beforeEach() 设置页面title

事件中设置title：

created(){document.title = "首页-消息"}

路由中设置title：

1, route:{meta:{title:'简介' }}

2, beforeEach((to, from, next) =>{document.title = to.matched[0].meta.title})

其他守卫函数

路由独享守卫

route 里面配置 beforeEnter(to,from,next) 函数

组件内守卫

beforeRouteEnter(to,from,next), beforeRouteUpdate(to,from,next), beforeRouteLeave(to,from,next)

keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
router-view 如果被包在 keep-alive里面，所有路径匹配到的视图组件都会被缓存
include: 字符串或正则表达式，只有匹配的组件才会被缓存
exclude: 字符串或正则表达式，任何匹配的组件都不会被缓存
使用： <keep-alive exclude="User,Profile"> <router-view /> </keep-alive>
组件内使用 activated 或者 deactivated 函数，只有当使用了keep-alive时，这两个函数才会生效
同时使用 beforeRouteLeave 函数，控制路由以保存状态并正确访问