Vue-Router
# Vue-Router
# 前端路由阶段
# 前后端分离阶段
- 随着
Ajax
的出现,有了前后端分离的开发模式。 - 后端只提供
API
来返回数据,前端通过 Ajax 获取数据,并且可以通过JavaScript
将数据渲染到页面中。 - 这样做最大的优点就是前后端责任的清晰,后端专注于数据上,前端专注于交互和可视化上。
- 并且当移动端(
IOS
/Android
)出现后,后端不需要进行任何处理,依然使用之前的一套 API 即可。
# 单页面应用阶段
- 其实
SPA
最主要的特点就是在前后端分离的基础上加了一层前端路由。 - 也就是前端来维护一套路由规则。
# 前端路由的核心是什么?
- 改变
URL
,但是页面不进行整体的刷新。
# 前端路由实现
# URL
的hash
URL
的hash
也就是锚点(#
),本质上是改变window.location
的href
属性。- 我们可以通过直接赋值
location.hash
来改变href
,但是页面不发生刷新。
# HTML5
的history
模式
# pushState
history
接口是HTML5
新增的,它有五种模式改变URL
而不刷新页面。history.pushState()
# replaceState
history.replaceState()
# go
history.go()
history.go(-1)
等价于history.back()
history.go(1)
等价于history.forward()
- 这三个接口等同于浏览器界面的前进后退。
# vue-router
# vue-router 是基于路由和组件的
- 路由用于设定访问路径,将路径和组件映射起来。
- 在
vue-router
的单页面应用中,页面的路径的改变就是组件的切换。
# 在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()
来安装路由功能)
- 第一步:导入路由对象,并且调用 Vue.use(VueRouter)
- 第二步:创建路由实例,并且传入路由映射配置
- 第三步:在 Vue 实例中挂载创建的路由实例
# 使用vue-router
的步骤
- 第一步:创建路由组件
- 第二步: 配置路由映射:组件和路径映射关系
- 第三步:使用路由:通过
router-link
和router-view
# 介绍
<router-link>
:该标签是一个 vue-router 已经内置的组件,它会被渲染成一个标签<router-view>
:该标签会根据当前的路径,动态渲染出不同的组件- 网页的其它内容,比如顶部的标题/导航,或者底部的一些版权信息等会和
<router-view>
处于同一个等级 - 在路由切换时,切换的是
<router-view>
挂载的组件,其它内容不会发生改变
# router-link
- to:用于指定跳转的路径
- tag:tag 可以指定
<router-link>
之后渲染成什么组件,比如下面的会被喧嚷称为<li>
标签,而不是<a>
<router-link to="/home" tag="li"></router-link>
1
- replace:路由跳转默认是可以返回的,也就是 push 进路由栈中,而加了 replace 属性后,不会出现返回和前进,因为该跳转使用 replaceState()
- active-class:当
<router-link>
对应的路由匹配成功时,会自动给当前元素设置一个 router-link-active 的 class,设置 active-class 可以修改默认的名称。- 在进行高亮显示的导航菜单或者底部 tabbar 时,会使用到该类。
- 通常不会修改类的属性,会直接使用默认的 router-link-active 即可。
# this.$router和this.$route
- this.$router 获取的是 router 路由表数组。
- this.$route 获取的是当前活跃状态的那一个路由对象
# 路由的懒加载
# 官方解释
- 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。
- 如果我们能把不同路由对应的组件风割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更高效了
# 对官方解释解读
- 首先,我们知道路由中通常会定义很多不同的页面。
- 这个页面最后被打包在哪里呢?一般情况下,是放在一个 js 文件中。
- 但是,页面这么多放在一个 js 文件中,必然会造成这个页面非常的大。
- 如果我们一次性从服务器请求下来这个页面,可能需要花费一定的时间,甚至用户的电脑上还出现了短暂空白的情况。
- 使用路由懒加载就能解决。
# 路由懒加载做的事情
- 路由懒加载的主要作用就是将路由对应的组件打包成一个个的 js 代码块。
- 只有在这个路由被访问到的时候,才加载对应的组件
# 懒加载的方式
- 结合 Vue 的异步组件和 Webpack 的代码分析
const Home = resolve => { require.ensure(['../components/Home.vue'], () =>{ resolve(require('../components/Home.vue'))
})
1
2
2
- AMD 写法
const About = (resolve = require(['../components/About.vue'], resolve))
1
- 在 es6 中,我们可以有更加简单的写法来组织 Vue 异步组件和 Webpack 的代码分割
const Home = () => import('../components/Home.vue')
1
# 传递参数
传递参数主要有两种类型:params
和query
# params
- 配置路由格式:
/router/:id
- 传递的方式:在
path
后面跟上对应的值 - 传递后形成的路径:
/router/123
# query
- 配置路由格式:/router,也就是普通配置
- 传递的方式:对象中使用 query 的 key 作为传递方式
- 传递后形成的路径:/router?id=123
<router-link
:to="{ path: '/home',query:{ name: 'coderly', sex: '男'} }"
></router-link>
1
2
3
2
3
// 获取传过来的值
this.$route.query
// 跳转传递的另一个方式
this.$router.push({
path: '/home',
query:{
name: 'coderly',
sex: '男’
}
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# keep-alive
# keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
它有两个非常重要的属性:
- include - 字符串或正则表达,只有匹配的组件会被缓存。
- 字符串或正则表达式,任何匹配的组件都不会被缓存
// exclude="home"的home是Home组件的name值,不是路径里的name
<keep-alive exclude="home,about">
<router-view />
</keep-alive>
1
2
3
4
2
3
4
上次更新: 2021/03/25, 12:42:28