使用路由大概步骤：
1.新建一个包含路由组件的vue项目，当然你也可以用命令安装：
命令安装路由【个人推荐直接新建脚手架的时候选中即可】：
npm install vue-router --save
2.在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
导入路由对象，并且调用 Vue.use(VueRouter) -> 创建路由实例，并且传入路由映射配置 -> 在Vue实例中挂载创建的路由实例.
3.使用路由：
⭐ 第一步: 创建路由组件 ⭐ 第二步: 配置路由映射: 组件和路径映射关系 ⭐ 第三步: 使用路由: 通过<router-link> 和 <router-view>
创建好了路由之后 src 文件夹会多出文件： 【没有的话自己创即可 如果你选项安装是会自带的 注意如果你是VUE版本不一样 初始化的代码不一样 单按照下面写即可：】
==========================================================================
下面自己写的 注释查看大概步骤
那么 我们其实可以自己写 把原有的都删除，注释里面讲解：
router文件夹下的 index.js:
那么入口函数中的 VUE实例直接挂载：
然后我们在components中写VUE组件，我们呢写两个 一个 Home.vue 一个 About.vue
然后我们最里面写东西：
<template>
<div class="about">
<p>我是 About 组件</p>
<hr>
</div>
</template>
<script>
export default {
name:"About",
}
</script>
<style>
.about{
border: red solid 2px;
}
</style>
About.vue
<template>
<div class="Home">
<p>我是 home 组件</p>
<hr>
</div>
</template>
<script>
export default {
name:"Home",
}
</script>
<style>
.home{
border: greenyellow solid 2px;
}
</style>
home.vue
然后 配置组件和路径的映射关系
在router中的index.js中 配置组件和路径：
2021年8月12日 15:07:42下面单词about 写成 auout 请修正
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home' //导入组件
import About from '../components/About' //导入组件
//注册路由插件
Vue.use(VueRouter)
//这里配置组件的映射和路径 【一个组件对应一个对象】
const routes = [
{path:'/home',component:Home},
{path:'/auout',component:About},
]
const router = new VueRouter({
routes
})
export default router
router下的index.js
然后用 和 使用路由.
我们在组件App的模板中 ，用这两个标签，
<router-link> : 该标签是一个 vue-router中已经内置的组件, 它会被渲染成一个标签. 他有一个to属性 表明要加的路径。
<router-view>：该标签会根据 当前的路径, 动态渲染出不同 的组件。
代码：
<template>
<div id="app">
<h1>我是网站标题 我是不会被改变的</h1>
<router-link to="/home">首页</router-link>
-----
<router-link to="/auout">关于</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"App"
}
</script>
<style>
a{
font-size: 25px;
text-decoration: none;
color: red;
}
</style>
App组件
运行：
这有个BUG 用户每次访问都要手来点击才能看到信息，，，那么我们要设置默认显示的路由组件 那么就设置 / 即可，在路由中添加路径和映射。
OK！ 接下来我们更改模式为 history：
然后就成功了：
这就是路由的配置和基本使用
作者：咸瑜
