前言
- vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
- 我们可以访问其官方网站对其进行学习: router.vuejs.org/zh/ vue-router是基于路由和组件的
- 路由用于设定访问路径, 将路径和组件映射起来.
- 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.
vue-router的基本使用
步骤一: 安装vue-router
- npm install vue-router --save
步骤二: 在模块化工程中使用它。因为是一个插件, 所以可以通过Vue.use()来安装路由功能
- 第一步：导入路由对象，并且调用 Vue.use(VueRouter)
- 第二步：创建路由实例，并且传入路由映射配置
路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块，使用ES6的语法，如图，就可以很简便做到. 只有在这个路由被访问到的时候, 才加载对应的组件。达到优化效果
使用vue-router的步骤:
- 第一步: 创建路由组件
- 第二步: 配置路由映射: 组件和路径映射关系
- path配置的是根路径:/
- redirect是重定向,也就是我们将根路径重定向到/home的路径下,这样就可以得到我们想要的结果了。
- 第三步：在Vue实例中挂载创建的路由实例
- 第三步: 使用路由: 通过<router-link>和<router-view>
- 上图中说了默认情况下, 路径的改变使用的URL的hash.
- 如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可:
关于router-link的常用知识点：
在前面的图中的红色字体也有说到<router-link>的一些属性,下面再说一下
-
to: 用于指定跳转的路径.
-
tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个<button>元素, 而不是<a>
-
replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
-
active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class（看下图）, 设置active-class可以修改默认的名称. 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类. 但是开发中通常不会修改类的属性, 会直接使用默认的router-link-active即可.
动态路由的设置：
vue-router的参数传递
传递和使用方式
- 传递参数主要有两种类型: params和query
- params的类型:
- 配置路由格式: /router/:id
- 传递的方式: 在path后面跟上对应的值
- 传递后形成的路径: /router/123, /router/abc
- query的类型:
-
配置路由格式: /router, 也就是普通配置
-
传递的方式: 对象中使用query的key作为传递方式
-
传递后形成的路径: /router?id=123, /router?id=abc
-
使用方式也有两种类型：<router-link>的方式和JavaScript代码方式
- <router-link>的方式
- js代码方式
获取参数
- 获取参数通过$route对象获取的，在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。
通过$route获取传递的信息如下图:
最后说一下$route和$router的区别：
- $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
- $route为当前router跳转对象里面可以获取name、path、query、params等
细节看下图：
vue-router 导航守卫
这个官方文档写的也很详细，需要自行跳转
最后这里补充一下keep-alive
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
- 它们有两个很重要的属性:
-
include - 只有匹配的组件会被缓存
-
exclude - 任何匹配的组件都不会被缓存
注意这里的逗号后面不能空格，否则User不生效！！！
- router-view 也是一个组件（感兴趣的可以看一下vue-router的源码，它里面注册了router-view和router-link这两个全局组件），如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：
