vue-router-CSDN博客

本文链接：https://blog.csdn.net/weixin_46048397/article/details/117986427

什么是Vue-router？

vue提供的前端路由管理工具，可以方便的设置前端路由。

前端路由的规则

URL的hash：

URL的hash就是锚点，本质上是改变window.location的href属性
我们可以通过直接赋值location.hash来改变href，但是页面不刷新

HTML5的history模式：

history接口时HTML5新增的，他有五种模式改变URL但不刷新页面
history.pushState() //堆栈一样，给压进去
- history.pushState({},'','/tby') //格式
history.replaceState //替换
模拟浏览器前进和后退
- history.go()
- history.back() === history.go(1) //向前走一步
- history.forward() === history.go(-1) //向后走一步

Vue-router基础内容

Vue-router是基于路由和组件的

路由用于设定访问路径，将路径和组件映射起来
在vue-router的单页面应用中，页面的路径就是组件的切换

从0开始，如何使用vue-router(在初始化项目时未勾选)

第一步：安装vue-router

npm install vue-router --save //运行时依赖

第二步：在模块化工程中使用
- 一般不建议全都写道main.js里面，会让main.js很庞大，所以新建一个文件夹router，建立index.js
- 导入路由对象，并且调用Vue.use(VueRouter)
- 创建路由实例，并且传入路由映射配置，导出路由
- 在vue实例中挂载创建的路由实例
第三步：使用vue-router：
- 创建路由组件
- 配置路由映射关系
- 使用路由 <router-link> <router-view>

完整的例子图

创建路由

挂载到vue实例上

使用路由

细节处理

路由的默认路径实现
需求：我们希望用户进入首页则默认渲染某一个组件的内容，不至于让首页是空白
解决：多设置一个配置：使用redirect重定向

在vue-router使用h5的history模式
创建router实例时，配置 mode:'history'

router-link 详细
属性：

tag ：可以指定<router-link>之后渲染成什么组件，默认为a标签
replace：添加replace属性不会history中留下记录，浏览器的返回键不会回到上一个界面
acive-class：当<router-link>被点击后，会自动添加一个默认名叫 router-link-active的class，设置active-class可以修改默认的名字；也可以在实例化的时候传入 linkActiveClass:''来修改默认的类名

路由的手动跳转实现

动态路由

需求：我们希望在页面进入页面时，同时带上一定的参数，如用户的id
了解：

URL:
- 协议://主机:端口/路径?查询
- scheme://host:port/path?query#fragment

所以，我们设置路由的时候可以

然后通过 this.$route.params.userId 来获取到这个params

最后在<router-link>里面动态绑定id值就可以实现动态路由

页面间数据通信也可以通过query实现

router-link标签to属性也可以接受一个对象，对象格式跟下图一样，在to属性里设置也可以达到同样的效果
在进行跳转时，可以直接穿query作为一个对象过去，然后在目标页面使用$route.query.属性获取到具体的值，本质是get方法

PS：$route是当前页面的路由对象，$router是全局路由的，包括了许多页面

路由懒加载
为什么需要路由懒加载？

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

如何实现路由懒加载？

在需要的时候在进行回调，es6写法

Vue异步组件写法：

const home = resolve =>{ require.ensure(['../components/Home.vue'],()=>{resolve(require('../components/Home.vue')})};

AMD写法：

const About = resolve => require(['../components/About.vue'].resolve);

ES6最简单了，推荐使用

路由嵌套

/home 叫路由 /home/tby 加上 /home/hx 就是路由嵌套，一个路由映射一个组件，两个路由分别渲染两个组件

实现路由嵌套的步骤：

创建对应子组件，并在路由映射中配置对应的子路由 children属性，跟routes配置一模一样
在组件内部使用<router-view>标签

导航守卫，懒得写了，先看官网

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

keep-alive：保留组件的状态避免重复渲染浪费资源
用<keep-alive>标签包裹住想要保持alive的组件
重要属性：

include -匹配到的组件被缓存
exclude -匹配到的不缓存