Vue-Router

前端路由阶段

前后端分离阶段

1. 随着Ajax的出现，有了前后端分离的开发模式。
2. 后端只提供API来返回数据，前端通过 Ajax 获取数据，并且可以通过JavaScript将数据渲染到页面中。
3. 这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上。
4. 并且当移动端（IOS/Android）出现后，后端不需要进行任何处理，依然使用之前的一套 API 即可。

单页面应用阶段

1. 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由。
2. 也就是前端来维护一套路由规则。

前端路由的核心是什么？

1. 改变URL，但是页面不进行整体的刷新。

前端路由实现

URL的hash

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

HTML5的history模式

pushState

1. history接口是HTML5新增的，它有五种模式改变URL而不刷新页面。
2. history.pushState()

replaceState

1. history.replaceState()

go

1. history.go()
2. history.go(-1)等价于history.back()
3. history.go(1)等价于history.forward()
4. 这三个接口等同于浏览器界面的前进后退。

vue-router

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

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

在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

1. 第一步：导入路由对象，并且调用 Vue.use(VueRouter)
2. 第二步：创建路由实例，并且传入路由映射配置
3. 第三步：在 Vue 实例中挂载创建的路由实例

使用vue-router的步骤

1. 第一步：创建路由组件
2. 第二步： 配置路由映射：组件和路径映射关系
3. 第三步：使用路由：通过router-link和router-view

介绍

1. <router-link>:该标签是一个 vue-router 已经内置的组件，它会被渲染成一个标签
2. <router-view>:该标签会根据当前的路径，动态渲染出不同的组件
3. 网页的其它内容，比如顶部的标题/导航，或者底部的一些版权信息等会和<router-view>处于同一个等级
4. 在路由切换时，切换的是<router-view>挂载的组件，其它内容不会发生改变

router-link

1. to：用于指定跳转的路径
2. tag：tag 可以指定<router-link>之后渲染成什么组件，比如下面的会被喧嚷称为<li>标签，而不是<a>

<router-link to="/home" tag="li"></router-link>

3. replace：路由跳转默认是可以返回的，也就是 push 进路由栈中，而加了 replace 属性后，不会出现返回和前进，因为该跳转使用 replaceState()
4. active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个 router-link-active 的 class，设置 active-class 可以修改默认的名称。
   • 在进行高亮显示的导航菜单或者底部 tabbar 时，会使用到该类。
   • 通常不会修改类的属性，会直接使用默认的 router-link-active 即可。

this.$router和this.$route

1. this.$router 获取的是 router 路由表数组。
2. this.$route 获取的是当前活跃状态的那一个路由对象

路由的懒加载

官方解释

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

对官方解释解读

1. 首先，我们知道路由中通常会定义很多不同的页面。
2. 这个页面最后被打包在哪里呢？一般情况下，是放在一个 js 文件中。
3. 但是，页面这么多放在一个 js 文件中，必然会造成这个页面非常的大。
4. 如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白的情况。
5. 使用路由懒加载就能解决。

路由懒加载做的事情

1. 路由懒加载的主要作用就是将路由对应的组件打包成一个个的 js 代码块。
2. 只有在这个路由被访问到的时候，才加载对应的组件

懒加载的方式

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')

传递参数

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

params

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

query

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

<router-link
  :to="{ path: '/home',query:{  name: 'coderly', sex: '男'} }"
></router-link>

// 获取传过来的值
this.$route.query
// 跳转传递的另一个方式
this.$router.push({
    path: '/home',
    query:{
        name: 'coderly',
        sex: '男’
    }
})

keep-alive

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

它有两个非常重要的属性：

1. include - 字符串或正则表达，只有匹配的组件会被缓存。
2. 字符串或正则表达式，任何匹配的组件都不会被缓存

// exclude="home"的home是Home组件的name值，不是路径里的name
<keep-alive exclude="home，about">
  <router-view />
</keep-alive>