vue-router详解

1.URL的hash和html5的history

URL的hash
1.URL的hash也就是锚点(#), 本质上是改变window.location的href属性.
2.我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.

2.认识vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
我们可以访问其官方网站对其进行学习: 链接: vue-router.

3.安装和使用vue-router

步骤一: 安装vue-router
npm install vue-router --save
步骤二: 在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例
使用vue-router的步骤:
第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过<router-link>和<router-view>
实例如下：
创建vue-router实例

挂载到Vue实例中

步骤一：创建路由组件

步骤二：配置组件和路径的映射关

步骤三：使用路由.

<router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签.
<router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件.
最终效果如下

4.路由的默认值和修改为history模式

默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.我们只需要配置多配置一个映射就可以了.

如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可

5.router-link的属性补充

<router-link>的一些属性:

1. to:用于指定跳转路径 <router-link to='/home' tag='li'>
2. tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a>
3. replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
4. active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.
   
   修改linkActiveClass
   
   

6.通过代码跳转路由

有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了

7.vue-router动态路由的使用

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：

1. /user/aaaa或/user/bbbb
2. 除了有前面的/user之外，后面还跟上了用户的ID
3. 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。
   
   
   
   

8.路由懒加载

路由懒加载的效果


懒加载之后的效果


懒加载的方式

1. 方式一: 结合Vue的异步组件和Webpack的代码分析.

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

2. 方式二: AMD写法

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

3. 方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.

const Home = () => import('../components/Home.vue')

9.参数传递

传递参数主要有两种类型: params和query
params类型

1. 配置路由格式: /router/:id
2. 传递的方式: 在path后面跟上对应的值
3. 传递后形成的路径: /router/123, /router/ab

query类型：

1. 配置路由格式: /router, 也就是普通配置
2. 传递的方式: 对象中使用query的key作为传递方式
3. 传递后形成的路径: /router?id=123, /router?id=abc

传递参数方式一: <router-link>

传递参数方式二: JavaScript代码

获取参数

• 获取参数通过$route对象获取的.
  • 在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。

10.路由的嵌套

在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
实现嵌套路由有两个步骤:
1.创建对应的子组件, 并且在路由映射中配置对应的子路由.
2.在组件内部使用<router-view>标签.
创建两个组件

在home组件中配置映射关系

11.router和route的由来

$route和$router是有区别的

1. $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
2. $route为当前router跳转对象里面可以获取name、path、query、params等
   

12.导航守卫

什么是导航守卫?

1. vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
2. vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发

我们可以利用beforeEach来完成标题的修改.
1.首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义
2.其次, 利用导航守卫,修改我们的标题.


导航钩子的三个参数解析:
to: 即将要进入的目标的路由对象.
from: 当前导航即将要离开的路由对象.
next: 调用该方法后, 才能进入下一个钩子.

补充一:如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.
补充二: 上面我们使用的导航守卫, 被称之为全局守卫.

1. 路由独享的守卫.
2. 组件内的守卫.

更多学习查看官网: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB
.

13.keep-alive属性

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

• 它们有两个非常重要的属性:
• include - 字符串或正则表达，只有匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

keep-alive中有两个生命周期函数：activated, deactivated

14.tabbar案列