vue路由全面详解（上）：基本使用、多级路由、工作模式……
目录
理解
vue 提出了路由 route 的概念。 vue 中的路由 route ，是一组映射关系（ key - value ），key 是路径，value 是组件，也就是路径与组件之间的映射。 多个路由需要路由器（router）进行管理。
注意：vue 中的路由 route ，与我们在计算机网络中的路由 没有任何关系，他们只是 同名 而已！
原始 html 中我们使用 a 标签实现 html 页面之间的跳转，使用路由之后，如果我们进行组件（也就是页面）切换与跳转，那么路由可以帮我们实现局部切换，不会全部刷新页面，节省开销。
一.基本使用
1.安装
在创建 vue 项目时，我们可以选择自定义安装路由，也可以选择默认安装，之后，在终端使用命令安装：
npm i vue-router
2.应用插件
在 src文件夹下，新建 router 文件夹，新建文件 index.js
在 main.js 中引入路由，并应用路由插件
3.编写 router 配置项
在 index.js 中写 router 配置项，将组件与路径，建立映射关系。
注意：要先引入组件和路由，下面是直接导入组件
按需导入组件：只需要将上图的第9和13行，改为下面的形式即可
component: () => import('../views/Home.vue')
小案例展示：
App 组件中引入 About 和 Home 组件，About 和 Home 组件映射了路由路径
接下来，我们来实现路由的切换。
第1步，借助 router-link 标签
<router-link> </router-link>
<template>
<div class="outer">
<div class="inner">
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link active-class="active" to="/home">Home主页</router-link>
<div style="margin-top: 20px"></div>
<router-link active-class="active" to="/about">About关于</router-link>
</div>
<div class="inner">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style scoped>
.outer{
width: 800px;
height: 800px;
background-color: #bfa;
}
.inner{
text-align: center;
}
</style>
其中：active-class 可配置高亮样式 ，to 后面是我们所要跳转的目标路径 path
<router-view> </router-view>指定组件展示的位置
鼠标点击 Home主页，下方切换到 Home 组件的内容；
鼠标点击 About关于，下方切换到 About 组件的内容，
二、多级路由
在 router 的 index.js 文件中，可以配置 children 项，实现多级路由。
在App组件中，完成路由切换，注意：要写完整的路径
<router-link to="/home/music">Music</router-link>
注意：不需要再写 <router-view> </router-view> ，页面中只需要写一次即可。
三、路由器的两种工作模式
url中的hash值是：网址中的 #及其后面的内容就是hash值，hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
-
hash模式：
-
地址中永远带着#号，不美观 。
-
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
-
兼容性较好。
-
-
history模式：
-
地址干净，美观 。
-
兼容性和hash模式相比略差。
-
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
-
四、注意事项
-
路由组件通常存放在 pages 文件夹，一般组件通常存放在 components 文件夹。
-
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
-
每个组件都有自己的 $route 属性，里面存储着自己的路由信息。
-
整个应用只有一个 router ，可以通过组件的 $router 属性获取到。
未完待续……