Vue-Router

学习目标：Vue-Router

---

认识路由

1.路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动
2. 路由器提供2种机制：

• 路由是决定数据包从来源到目的地的路径
• 转送将输入端的数据转移到合适的输出端

3. 路由中有一个重要的概念：路由表（本质上是一个映射表，决定了数据包的指向）

前端渲染和后端渲染

后端渲染：在后端通过一些技术（PHP/JSP等）将网页渲染出来（在服务器就渲染好了）
后端路由：后端处理URL和页面之间的映射关系
前端渲染：浏览器中显示的网页中大部分是由前端写的js代码在浏览器中执行最终渲染出来的网页（后端只负责提供API，前端通过Ajax获取数据，并且通过Javascript渲染到页面中）

前端路由的核心：改变URL，页面不进行整体刷新

• hash

location.hash = "foo"

• history

history.pushState({},'','home')
#会将栈顶元素移除
history.back() 
history.replaceState({},'','home')

history.go()
history.back等价于history.go(-1)
history.forwrad()等价于history.go(1)
这三个接口相当于；浏览器的前进后退

vue-router基本使用

目前前端流行的三大框架路由实现

• Angular的ngRouter
• React的ReactRouter
• Vue的vue-router

1.vue-router初始化

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

2.小知识点

<template>
  <div id="app">
    <!-- tag属性是可以指定组件渲染成什么标签，默认是a标签，replace是为了不让组件有历史问题 -->
    <router-link to="/home" tag="button" replace="">首页</router-link>
    <router-link to="/about">关于</router-link>

    <!-- 想要使用代码修改router -->
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    homeClick() {
      this.$router.push('./home')
      // 不想有历史问题，可以使用以下用法
      // this.$router.replace('/home')
    },
    aboutClick() {
      this.$router.push('./about')
    }
  },
}
</script>

<style>
/* 当我们的组件处于活跃状态的时候，会添加上.router-link-active类名，我们可以直接获取该类名进行我们想要的CSS修改
如果我们不想用该类名，想要更换，则可以在Router的路由配置中添加linkActiveClass：'active'
*/
  .router-link-active {
    color: red;
  }
</style>

3.动态路由

在某些情况下，一个页面的path路径可能是不确定的

# 路由配置
export default new Router({
  // 配置路由和组件的映射关系
  routes: [
    // 默认让路由处于home页面
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      // name: 'HelloWorld',
      component: Home
    },{
      path: '/about',
      component: About
    },{
      path: '/user/:userId',
      component: User
    }
  ],
  mode: 'history'
})
# 在组件页面中获取路由中的userId
<template>
    <div>
        <h2>我是用户页面</h2>
        <p>我是用户页面内容</p>
        <p>你好{{userId}}</p>
        <p>{{$route.params.userId}}</p>
    </div>
</template>
<script>
export default {
    name: 'User',
    computed: {
        userId() {
            // 当前活跃的路由（$route）
            return this.$route.params.userId
        }
    }
}
</script>

4.认识路由的懒加载

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

路由懒加载方式：

• 方式一：结合Vue的异步组件和Webpack的代码分析
• 方式二：AMD写法
• 方法三：在Es6中，我们使用更加简单的犯法来组织Vue异步组件和Webpack的代码分割

vue-router嵌套路由

路由嵌套是一个常用的功能

• 比如在home页面中，我们希望通过home/news和home/message访问一些内容
• 一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

实现嵌套路由的步骤：

• 创建对应的子组件，并且在路由映射中配置对应的子路由
  -
  

• 在组件颞部使用<router-view>标签
  

vue-router参数传递

传递参数的两种方式：

params的类型：

• 配置路由格式：/router/:id

• 传递的方式：在path后面跟上对应的值
  

• 传递后形成的路径：/router/123，/router/abc
  

query的类型：

• 配置路由器格式：/router，也就是普通配置
  

• 传递的方式：对象中使用query的key作为传递方式
  
  

• 传递后形成的路径：/router？id=123，router？id=abc
  

$ route和$ router区别

• $router：是全局的router
• $route：是当前活跃的路由配置

vue-router导航守卫

使用导航守卫制作了一个跳转变化的标题

• vur-router提供的导航守卫主要是用来监听路由的进入和离开
• vue-router提供了beforeEach和afterEach的钩子函数，它们会在路由即将改变前和改变后触发
• 如果是后置钩子，也就是afterEach，不需要主动调用next()函数
  • 路由独享守卫beforeEnter（和前置守卫参数一样）
  • 组件内的守卫
    • beforeRouterEnter
    • beforeRouterUpdate
    • beforeRouterLeave

keep-alive

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

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

• router-view也是一个组件，如果直接被包在keep-alive里面，则所有路径匹配到的视图组件都会被缓存