这是我参与「第四届青训营 」笔记创作活动的第15天

1.什么是路由

1.认识路由

0. 路由是通过互联的网络把信息从源地址传输到目的地址的活动
1. 路由器提供了两种机制：路由和转送 路由是决定数据包从来源到目的地的路径 转送将输入端的数据转移到合适的输出端
2. 路由表本质上是一个映射表，决定了数据包的指向

2.前端渲染和后端渲染(理解)

①后端渲染

0. jsp：java server page
1. 又称为服务器渲染
2. html+css+java，java代码作用是从数据库中读取数据，并且将它动态的放在页面中

②前端渲染

0. 浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页

3.前端路由和后端路由(理解)

①后端路由

0. 后端路由：后端处理URL和页面之间的映射关系
1. 后端路由阶段

②前端路由

0. 前后端分离阶段
1. 单页面富应用阶段
2. 前端路由的核心：改变URL，但是页面不进行整体的刷新
3. 前端路由实际上是url和组件的映射关系

2.url的hash和HTML5的history

0. 如何改变URL，但是页面不进行整体的刷新：url的hash和html5的history

①URL的hash

0. 通过直接赋值location.hash来改变href

②HTML5的history模式：pushState

0. history.pushState(data,title,?url) 一般是history.pushState({}，‘’，url)
1. 示例
2. 有点类似于栈结构
3. 可以通过history.back()回到上一个页面

③HTML5的history模式：replaceState

0. history.replaceState({}，‘’，url)，注意url要打引号
1. 这个方式无法使用回退按钮回退，不保留历史记录

④HTML5的history模式：go

0. history.back()等价于history.go(-1)
1. history.forward等价于history.go(1)
2. go只能在pushState里使用，才能访问历史记录

3.安装和配置方式

1.认识vue-router

0. 目前流行的三大框架，都有自己的路由实现 Angular的ngRouter React的ReactRouter Vue的vue-router
1. vue-router是基于路由和组件的 路由用于设定访问路径，将路径和组件映射起来 在vue-router的单页面应用中，页面的路径的改变就是组件的切换

2.安装vue-router

0. 安装：npm install vue-router --save
1. 在模块化工程中使用它(因为是一个插件，所以可以通过Vue.use()来安装插件即路由功能) ①导入路由对象，调用Vue.use(VueRouter) ②创建路由实例，并且传入路由映射配置 ③在Vue实例中挂载创建的路由实例
2. 搭建路由框架

3.使用vue-router步骤

0. 步骤： ①创建路由组件 ②配置路由映射：组件和路径映射关系 ③使用路由：通过<router-link>和<router-view>
1. 代码示例 index.js文件 About.vue和Home.vue文件 App.vue文件
2. <router-link>该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签
3. <router-viewer>该标签会根据当前的路径，动态渲染出不同的组件
4. 在路由切换时，切换的是<router-viewer>挂载的组件，其他内容不会发生改变

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

0. 路由的默认路径：
1. HTML5的history模式 默认情况下，是哈希hash模式，即在更改路径时会有“#”的出现 如何修改为history模式：

4.router-link的其他属性补充

1.属性：to

用于指定跳转的路径，且把<router-link>渲染成a标签

2.tag属性

tag可以指定<router-link>之后渲染什么组件，比如<router-link to='/home' tag='button'>

3.replace属性

replace不会留下history记录，指定replace的情况下，后退键返回不能返回到上一个页面中<router-link to='/home' replace>

4.active-class属性

0. 当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class值，设置active-class属性可以修改默认的名称
1. 通常不会修改类的属性，会直接使用默认的
2. 如果我们不希望大量标签都要写上active-class，则可以在路由配置index.js中，添加linkActiveClass属性

5.通过代码跳转路由

<template>
  <div id="app">
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
  </div>
</template>
​
<script>
export default {
  name: 'App',
  methods: {
    homeClick() {
      //push相当于pushState
      this.$router.push('/home')
      // 还可以用replace的方法
      this.$router.replace('/home')
    },
    aboutClick() {
      this.$router.push('/about')
    }
  }
}
</script>