关于前端:vue2笔记

本文是尚硅谷前端笔记，原视频

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 寄存动态资源
│ │ └── logo.png
│ │── component: 寄存组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制疏忽的配置
├── babel.config.js: babel 的配置文件
├── package.json: 利用包配置文件
├── README.md: 利用形容文件
├── package-lock.json：包版本控制文件

vue.js 与 vue.runtime.xxx.js 的区别：
vue.js 是完整版的 Vue，蕴含：外围性能 + 模板解析器。
vue.runtime.xxx.js 是运行版的 Vue，只蕴含：外围性能；没有模板解析器。
因为 vue.runtime.xxx.js 没有模板解析器，所以不能应用 template 这个配置项，须要应用 render 函数接管到的 createElement 函数去指定具体内容。

应用 vue inspect > output.js 能够查看到 Vue 脚手架的默认配置。
应用 vue.config.js 能够对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

被用来给元素或子组件注册援用信息（id 的替代者）
利用在 html 标签上获取的是实在 DOM 元素，利用在组件标签上是组件实例对象（vc）

应用形式：

1. 打标识：`<h1 ref="xxx">.....</h1>` 或 `<School ref="xxx"></School>`
2. 获取：`this.$refs.xxx`

性能：让组件接管内部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
1. 第一种形式（只接管）：props:['name']
2. 第二种形式（限度类型）：props:{name:String}
3. 第三种形式（限度类型、限度必要性、指定默认值）：
```
props:{
 name:{
 type:String, // 类型
 required:true, // 必要性
 default:'老王' // 默认值
 }
}
```

备注：props 是只读的，Vue 底层会监测你对 props 的批改，如果进行了批改，就会收回正告，若业务需要的确须要批改，那么请复制 props 的内容到 data 中一份，而后去批改 data 中的数据。

性能：能够把多个组件共用的配置提取成一个混入对象
应用形式：

第一步定义混合：
```
{data(){....},
    methods:{....}
    ....
}
```
第二步应用混入：
全局混入：Vue.mixin(xxx)
部分混入：mixins:['xxx']

性能：用于加强 Vue
实质：蕴含 install 办法的一个对象，install 的第一个参数是 Vue，第二个当前的参数是插件使用者传递的数据。

定义插件：

对象.install = function (Vue, options) {
    // 1. 增加全局过滤器
    Vue.filter(....)

    // 2. 增加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 增加实例办法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

应用插件：Vue.use()

作用：让款式在部分失效，避免抵触。
写法：<style scoped>

组件化编码流程：

(1). 拆分动态组件：组件要依照性能点拆分，命名不要与 html 元素抵触。(2). 实现动静组件：思考好数据的寄存地位，数据是一个组件在用，还是一些组件在用：1>. 一个组件在用：放在组件本身即可。2>. 一些组件在用：放在他们独特的父组件上（状态晋升）。(3). 实现交互：从绑定事件开始。

props 实用于：
1. 父组件 ==> 子组件通信
2. 子组件 ==> 父组件通信（要求父先给子一个函数）
应用 v-model 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是只读的。
props 传过来的若是对象类型的值，批改对象中的属性时 Vue 不会报错，但不举荐这样做。（因为 props 是浅层校验）

存储内容大小个别反对 5MB 左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相干 API：
1. xxxxxStorage.setItem('key', 'value');
  该办法承受一个键和值作为参数，会把键值对增加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person');
  该办法承受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key');
  该办法承受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  该办法会清空存储中的所有数据。
备注：
1. SessionStorage 存储的内容会随着浏览器窗口敞开而隐没。
2. LocalStorage 存储的内容，须要手动革除才会隐没。
3. xxxxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到，那么 getItem 的返回值是 null。
4. JSON.parse(null)的后果仍然是 null。

一种组件间通信的形式，实用于：子组件 ===> 父组件
应用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（事件的回调在 A 中）。
绑定自定义事件：
1. 第一种形式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2. 第二种形式，在父组件中：
```
<Demo ref="demo"/>
......
mounted(){this.$refs.xxx.$on('atguigu',this.test)
}
```
3. 若想让自定义事件只能触发一次，能够应用 once 修饰符，或 $once 办法。
触发自定义事件：this.$emit('atguigu', 数据)
解绑自定义事件this.$off('atguigu')
组件上也能够绑定原生 DOM 事件，须要应用 native 修饰符。
留神：通过 this.$refs.xxx.$on('atguigu', 回调) 绑定自定义事件时，回调 要么配置在 methods 中 ， 要么用箭头函数，否则 this 指向会出问题！

一种组件间通信的形式，实用于 任意组件间通信。

装置全局事件总线：

new Vue({
 ......
 beforeCreate() {Vue.prototype.$bus = this // 装置全局事件总线，$bus 就是以后利用的 vm},
    ......
})

应用事件总线：
1. 接收数据：A 组件想接收数据，则在 A 组件中给 $bus 绑定自定义事件，事件的回调留在 A 组件本身。
```
methods(){demo(data){......}
}
......
mounted() {this.$bus.$on('xxxx',this.demo)
}
```
2. 提供数据：this.$bus.$emit('xxxx', 数据)
最好在 beforeDestroy 钩子中，用 $off 去解绑 以后组件所用到的 事件。

一种组件间通信的形式，实用于 任意组件间通信。
应用步骤：
1. 装置 pubsub：npm i pubsub-js
2. 引入: import pubsub from 'pubsub-js'
3. 接收数据：A 组件想接收数据，则在 A 组件中订阅音讯，订阅的回调留在 A 组件本身。
```
methods(){demo(data){......}
}
......
mounted() {this.pid = pubsub.subscribe('xxx',this.demo) // 订阅音讯
}
```
4. 提供数据：pubsub.publish('xxx', 数据)
5. 最好在 beforeDestroy 钩子中，用 PubSub.unsubscribe(pid) 去勾销订阅。

什么时候用：当扭转数据后，要基于更新后的新 DOM 进行某些操作时，要在 nextTick 所指定的回调函数中执行。
语法：this.$nextTick(回调函数)
作用：在下一次 DOM 更新完结后执行其指定的回调。

作用：在插入、更新或移除 DOM 元素时，在适合的时候给元素增加款式类名。
写法：

1. 筹备好款式：- 元素进入的款式：1. v-enter：进入的终点
     2. v-enter-active：进入过程中
     3. v-enter-to：进入的起点
   - 元素来到的款式：1. v-leave：来到的终点
     2. v-leave-active：来到过程中
     3. v-leave-to：来到的起点

2. 应用 `<transition>` 包裹要适度的元素，并配置 name 属性：<transition name="hello">
 <h1 v-show="isShow"> 你好啊！</h1>
</transition>

备注：若有多个元素须要适度，则须要应用：`<transition-group>`，且每个元素都要指定 `key` 值。

发申请有哪些？

xhr，new XHLHttpRequest() xhr.open() xhr.send()
jQuery $.get 封装了 xhr
axios
fetch 有局部兼容性问题

同源策略：如果两个 URL 的 protocol、port、host 都雷同的话，则这两个 URL 是同源。即申请发了，服务器收了，但浏览器拦了

cors, 承受申请后，携带非凡响应头
jsonp, 只能解决 get 申请
代理服务器
nginx(学习老本较高)
vue-cli
如果代理服务器自身有，不会转发申请

办法一：在 vue.config.js 中增加如下配置：

devServer: {proxy: "http://localhost:5000";}

阐明：

长处：配置简略，申请资源时间接发给前端（8080）即可。
毛病：不能配置多个代理，不能灵便的管制申请是否走代理。
工作形式：若依照上述配置代理，当申请了前端不存在的资源时，那么该申请会转发给服务器（优先匹配前端资源）

办法二：编写 vue.config.js 配置具体代理规定：

module.exports = {
  devServer: {
    proxy: {
      "/api1": {
        // 匹配所有以 '/api1' 结尾的申请门路
        target: "http://localhost:5000", // 代理指标的根底门路
        changeOrigin: true, // 坑骗服务器是本人申请本人
        pathRewrite: {"^/api1": ""},
      },
      "/api2": {
        // 匹配所有以 '/api2' 结尾的申请门路
        target: "http://localhost:5001", // 代理指标的根底门路
        changeOrigin: true,
        pathRewrite: {"^/api2": ""},
      },
    },
  },
};

阐明：

长处：能够配置多个代理，且能够灵便的管制申请是否走代理。
毛病：配置稍微繁琐，申请资源时必须加前缀。

作用：让父组件能够向子组件指定地位插入 html 构造，也是一种组件间通信的形式，实用于 父组件 ===> 子组件。
分类：默认插槽、具名插槽、作用域插槽

应用形式：

默认插槽：

父组件中：<Category>
           <div>html 构造 1 </div>
        </Category>
子组件中：<template>
  <div>
    <!-- 定义插槽 -->
    <slot> 插槽默认内容...</slot>
  </div>
</template>

具名插槽：

父组件中：<Category>
   <template slot="center">
     <div>html 构造 1 </div>
   </template>
   <template v-slot:footer>
      <div>html 构造 2 </div>
   </template>
</Category>
子组件中：<template>
  <div>
    <!-- 定义插槽 -->
    <slot name="center"> 插槽默认内容...</slot>
    <slot name="footer"> 插槽默认内容...</slot>
  </div>
</template>

作用域插槽：

了解：数据在组件的本身，但依据数据生成的构造须要组件的使用者来决定。（games 数据在 Category 组件中，但应用数据所遍历进去的构造由 App 组件决定）

具体编码：

父组件中：<Category>
   <template scope="scopeData">
    <!-- 生成的是 ul 列表 -->
    <ul>
     <li v-for="g in scopeData.games" :key="g">{{g}}</li>
    </ul>
   </template>
  </Category>

<Category>
   <template slot-scope="scopeData">
    <!-- 生成的是 h4 题目 -->
    <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
   </template>
  </Category>
子组件中：<template>
  <div>
    <slot :games="games"></slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
  // 数据在子组件本身
  data() {
    return {games: ["红色警戒", "穿梭前线", "劲舞团", "超级玛丽"],
    };
  },
};
</script>

在 Vue 中实现集中式状态（数据）治理的一个 Vue 插件，对 vue 利用中多个组件的共享状态进行集中式的治理（读 / 写），也是一种组件间通信的形式，且实用于任意组件间通信。

多个组件须要共享数据时

创立文件：src/store/index.js

// 引入 Vue 外围库
import Vue from "vue";
// 引入 Vuex
import Vuex from "vuex";
// 利用 Vuex 插件
Vue.use(Vuex);

// 筹备 actions 对象——响应组件中用户的动作
const actions = {};
// 筹备 mutations 对象——批改 state 中的数据
const mutations = {};
// 筹备 state 对象——保留具体的数据
const state = {};

// 创立并裸露 store
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

在 main.js 中创立 vm 时传入 store 配置项

// 引入 store
import store from "./store";
// 创立 vm
new Vue({
  el: "#app",
  render: (h) => h(App),
  store,
});

初始化数据、配置actions、配置mutations，操作文件store.js

// 引入 Vue 外围库
import Vue from "vue";
// 引入 Vuex
import Vuex from "vuex";
// 援用 Vuex
Vue.use(Vuex);
const actions = {
  // 响应组件中加的动作
  jia(context, value) {// console.log('actions 中的 jia 被调用了',miniStore,value)
    context.commit("JIA", value);
  },
};
const mutations = {
  // 执行加
  JIA(state, value) {// console.log('mutations 中的 JIA 被调用了',state,value)
    state.sum += value;
  },
};
// 初始化数据
const state = {sum: 0,};
// 创立并裸露 store
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

组件中读取 vuex 中的数据：$store.state.sum
组件中批改 vuex 中的数据：$store.dispatch('action 中的办法名', 数据) 或 $store.commit('mutations 中的办法名', 数据)

备注：若没有网络申请或其余业务逻辑，组件中也能够越过 actions，即不写dispatch，间接编写commit

概念：当 state 中的数据须要通过加工后再应用时，能够应用 getters 加工。

在 store.js 中追加 getters 配置

......

const getters = {bigSum(state){return state.sum * 10}
}

// 创立并裸露 store
export default new Vuex.Store({
 ......
 getters
})

组件中读取数据：$store.getters.bigSum

mapState 办法：用于帮忙咱们映射 state 中的数据为计算属性

computed: {
 // 借助 mapState 生成计算属性：sum、school、subject（对象写法）...mapState({sum:'sum',school:'school',subject:'subject'}),

 // 借助 mapState 生成计算属性：sum、school、subject（数组写法）...mapState(['sum','school','subject']),
},

mapGetters 办法：用于帮忙咱们映射 getters 中的数据为计算属性

computed: {
    // 借助 mapGetters 生成计算属性：bigSum（对象写法）...mapGetters({bigSum:'bigSum'}),

    // 借助 mapGetters 生成计算属性：bigSum（数组写法）...mapGetters(['bigSum'])
},

mapActions 办法：用于帮忙咱们生成与 actions 对话的办法，即：蕴含 $store.dispatch(xxx) 的函数

methods:{
    // 靠 mapActions 生成：incrementOdd、incrementWait（对象模式）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    // 靠 mapActions 生成：incrementOdd、incrementWait（数组模式）...mapActions(['jiaOdd','jiaWait'])
}

mapMutations 办法：用于帮忙咱们生成与 mutations 对话的办法，即：蕴含 $store.commit(xxx) 的函数

methods:{
    // 靠 mapActions 生成：increment、decrement（对象模式）...mapMutations({increment:'JIA',decrement:'JIAN'}),

    // 靠 mapMutations 生成：JIA、JIAN（对象模式）...mapMutations(['JIA','JIAN']),
}

备注：mapActions 与 mapMutations 应用时，若须要传递参数须要：在模板中绑定事件时传递好参数，否则参数是事件对象。

目标：让代码更好保护，让多种数据分类更加明确。

批改store.js

const countAbout = {
  namespaced:true,// 开启命名空间
  state:{x:1},
  mutations: {...},
  actions: {...},
  getters: {bigSum(state){return state.sum * 10}
  }
}

const personAbout = {
  namespaced:true,// 开启命名空间
  state:{...},
  mutations: {...},
  actions: {...}
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

开启命名空间后，组件中读取 state 数据：

// 形式一：本人间接读取
this.$store.state.personAbout.list
// 形式二：借助 mapState 读取：...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取 getters 数据：

// 形式一：本人间接读取
this.$store.getters['personAbout/firstPersonName']
// 形式二：借助 mapGetters 读取：...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用 dispatch

// 形式一：本人间接 dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
// 形式二：借助 mapActions：...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用 commit

// 形式一：本人间接 commit
this.$store.commit('personAbout/ADD_PERSON',person)
// 形式二：借助 mapMutations：...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

了解：一个路由（route）就是一组映射关系（key – value），多个路由须要路由器（router）进行治理。
前端路由：key 是门路，value 是组件。

装置 vue-router，命令：npm i vue-router
利用插件：Vue.use(VueRouter)
编写 router 配置项:

// 引入 VueRouter
import VueRouter from "vue-router";

// 创立 router 实例对象，去治理一组一组的路由规定
const router = new VueRouter({
  routes: [
    {
      path: "/about",
      component: () => import("../components/About"),
    },
    {
      path: "/home",
      component: () => import("../components/Home"),
    },
  ],
});

// 裸露 router
export default router;

实现切换高亮款式<router-link active-class="active" to="/about">About</router-link>
指定展现地位<router-view></router-view>

路由组件通常寄存在 views 文件夹，个别组件通常寄存在 components 文件夹。
通过切换，“暗藏”了的路由组件，默认是被销毁掉的，须要的时候再去挂载。
每个组件都有本人的 $route 属性，外面存储着本人的路由信息。
整个利用只有一个 router，能够通过组件的 $router 属性获取到。

配置路由规定，应用 children 配置项：

routes: [
  {
    path: "/about",
    component: About,
  },
  {
    path: "/home",
    component: Home,
    // 通过 children 配置子级路由
    children: [
      {
        path: "news", // 此处肯定不要写：/news
        component: News,
      },
      {
        path: "message", // 此处肯定不要写：/message
        component: Message,
      },
    ],
  },
];

跳转（要写残缺门路）：<router-link to="/home/news">News</router-link>

传递参数

<!-- 跳转并携带 query 参数，to 的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title= 你好"> 跳转 </router-link>

<!-- 跳转并携带 query 参数，to 的对象写法 -->
<router-link
  :to="{
    path: '/home/message/detail',
    query: {
      id: 666,
      title: '你好',
    },
  }"
> 跳转 </router-link>

接管参数：$route.query.id, $route.query.title;

作用：能够简化路由的跳转。
如何应用

<!-- 1. 给路由命名：-->
router 中 children 数组对象的 name 配置项

<!-- 简化前，须要写残缺的门路 -->
<router-link to="/demo/test/welcome"> 跳转 </router-link>

<!-- 简化后，间接通过名字跳转 -->
<router-link :to="{name:'hello'}"> 跳转 </router-link>

<!-- 简化写法配合传递 query 参数 -->
<router-link
  :to="{
    name: 'hello',
    query: {
      id: 666,
      title: '你好',
    },
  }"
> 跳转 </router-link>

配置路由，申明接管 params 参数

{
 path:'/home',
 component:Home,
 children:[
  {
   path:'news',
   component:News
  },
  {
   component:Message,
   children:[
    {
     name:'xiangqing',
     path:'detail/:id/:title', // 应用占位符申明接管 params 参数
     component:Detail
    }
   ]
  }
 ]
}

传递参数

<!-- 跳转并携带 params 参数，to 的字符串写法 -->
<router-link :to="/home/message/detail/666/ 你好"> 跳转 </router-link>

<!-- 跳转并携带 params 参数，to 的对象写法 -->
<router-link
  :to="{
    name: 'xiangqing',
    params: {
      id: 666,
      title: '你好',
    },
  }"
> 跳转 </router-link>

特地留神：路由携带 params 参数时，若应用 to 的对象写法，则不能应用 path 配置项，必须应用 name 配置！

接管参数：$route.params.id; $route.params.title;

作用：让路由组件更不便的收到参数

{
 name:'xiangqing',
 path:'detail/:id',
 component:Detail,

 // 第一种写法：props 值为对象，该对象中所有的 key-value 的组合最终都会通过 props 传给 Detail 组件
 // props:{a:900}

 // 第二种写法：props 值为布尔值，布尔值为 true，则把路由收到的所有 params 参数通过 props 传给 Detail 组件
 // props:true

 // 第三种写法：props 值为函数，该函数返回的对象中每一组 key-value 都会通过 props 传给 Detail 组件
 props(route){
  return {
   id:route.query.id,
   title:route.query.title
  }
 }
}

8.`<router-link>`的 replace 属性 -P125

作用：管制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入形式：别离为 push 和replace，push是追加历史记录，replace是替换以后记录。路由跳转时候默认为push
如何开启 replace 模式：<router-link replace .......>News</router-link>

作用：不借助 <router-link> 实现路由跳转，让路由跳转更加灵便

具体编码：

//$router 的两个 API
this.$router.push({
  name: "detail",
  params: {
    id: xxx,
    title: xxx,
  },
});

this.$router.replace({
  name: "detail",
  params: {
    id: xxx,
    title: xxx,
  },
});
this.$router.forward(); // 后退
this.$router.back(); // 后退
this.$router.go(); // 可后退也可后退

作用：让不展现的路由组件放弃挂载，不被销毁。

具体编码：

<keep-alive include="Detail"> 
    <router-view></router-view>
</keep-alive>

作用：路由组件所独有的两个钩子，用于捕捉路由组件的激活状态。
具体名字：
activated路由组件被激活时触发。
deactivated路由组件失活时触发。

作用：对路由进行权限管制
分类：全局守卫、独享守卫、组件内守卫

全局守卫:

// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to, from, next) => {console.log("beforeEach", to, from);
  if (to.meta.isAuth) {
    // 判断以后路由是否须要进行权限管制
    if (localStorage.getItem("school") === "atguigu") {
      // 权限管制的具体规定
      next(); // 放行} else {alert("暂无权限查看");
      // next({name:'guanyu'})
    }
  } else {next(); // 放行
  }
});

// 全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to, from) => {console.log("afterEach", to, from);
  if (to.meta.title) {document.title = to.meta.title; // 批改网页的 title} else {document.title = "vue_test";}
});

独享守卫:

beforeEnter(to,from,next){console.log('beforeEnter',to,from)
 if(to.meta.isAuth){ // 判断以后路由是否须要进行权限管制
  if(localStorage.getItem('school') === 'atguigu'){next()
  }else{alert('暂无权限查看')
   // next({name:'guanyu'})
  }
 }else{next()
 }
}

组件内守卫：

// 进入守卫：通过路由规定，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
// 来到守卫：通过路由规定，来到该组件时被调用
beforeRouteLeave (to, from, next) {}

对于一个 url 来说，什么是 hash 值？—— #及其前面的内容就是 hash 值。
hash 值不会蕴含在 HTTP 申请中，即：hash 值不会带给服务器。

hash 模式

1.  地址中永远带着 #号，不美观。2.  若当前将地址通过第三方手机 app 分享，若 app 校验严格，则地址会被标记为不非法
3.  兼容性较好。

history 模式：

1. 地址洁净，好看。2. 兼容性和 hash 模式相比略差。3. 利用部署上线时须要后端人员反对，解决刷新页面服务端 404 的问题。

Vue 笔记

细节

脚手架文件构造 -P62

对于不同版本的 Vue-P63

vue.config.js 配置文件 -p64

ref 属性 -P65

props 配置项 -P66

mixin(混入)-P67

插件 -P68

scoped 款式 -P69

总结 TodoList 案例 -P70

webStorage-P78

??? 组件的自定义事件 -P80

全局事件总线（GlobalEventBus）-P84

音讯订阅与公布（pubsub）-P87

nextTick-P90

Vue 封装的适度与动画 -P91

vue 脚手架配置代理 -P96

插槽 -P102~104

Vuex-P105

1. 概念 -P107

2. 何时应用？

3. 搭建 vuex 环境 -P108

4. 根本应用 -P108~110

5.getters 的应用 -P111

6. 四个 map 办法的应用 -P112~113

7. 模块化 + 命名空间 -P115

路由 -P117

1. 根本应用 -P118

2. 几个留神点 -P119

3. 多级路由（多级路由）-P120

4. 路由的 query 参数 -P121

5. 命名路由 -P122

6. 路由的 params 参数 -P123

7. 路由的 props 配置 -P124

8.<router-link>的 replace 属性 -P125

9. 编程式路由导航 -P126

10. 缓存路由组件 -P127

11. 两个新的生命周期钩子 -P128

12. 路由守卫 -P129~132

13. 路由器的两种工作模式 -p133

动静增加路由

8.`<router-link>`的 replace 属性 -P125