前言：这次的笔记主要内容是vue-router的安装和配置，路由在vue里很重要！！
一、什么是Vue-router
- vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用
- vue-router是基于路由和组件的
- 路由用于设定访问路径，将路径和组件映射起来
- 在vue-router的单页面应用中，页面的路径的改变就是组件的切换
二、安装和使用vue-router
安装
如果是用webpack来配置的，则我们可以直接使用npm来安装路由
> npm install vue-router-save
在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use（）来安装路由功能）
- 第一步：导入路由对象实例，并调用Vue.use（VueRouter）
- 第二步：创建路由实例，并传入路由映射配置
- 第三步：在Vue实例中挂载创建的路由实例
//在router文件夹下创建index.js文件配置路由相关信息
import VueRouter from 'vue-router'//从vue-router的框架里导入VueRouter（它是个插件）对象
import Vue from 'vue' //导入Vue
//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象
const routes = [] //这里还没有配置呢！
const router = new VueRouter({
routes //在这里配置组件和路由的映射关系
})
//3.将router对象传入实例中
export default router //将它导出
在需要导入的js文件中挂载它，这里我们把它叫做**main.js**
import Vue from 'vue'
import APP from './APP'
import router from './router' //也可以是./router/index,会自动到router目录下去寻找要导入的router
Vue.config.productionTip = false
new Vue({
el:"#app",
router, //挂载到vue实例里
render:h => h(APP) //把APP里的内容渲染到页面中，
//这里APP.vue相当于根组件，一开始就会渲染出来
})
使用
- 第一步：创建路由组件
- 第二步：配置路由映射：组件和路径映射关系
- 第三步：使用路由：通过 和
路由映射配置和呈现
现在我们在components文件夹下创建两个.vue的组件，就是用于切换的那部分组件。
这是home.vue文件
//这个是home.vue
<template>
<div>
<h2>我是首页</h2>
<p>我是首页内容</p>
</div>
</template>
<script>
export default {
name:'Home'
}
</script>
这是about.vue文件
//这个是about.vue
<template>
<div>
<h2>我是关于</h2>
<p>我是关于内容</p>
</div>
</template>
<script>
export default {
name:'About'
}
</script>
现在我们需要在上面那个**index.js**文件里没有配置的const routes = [] 里面去配置。
注意：一个映射就需要创建一个对象，现在我们有两个映射，故要创建两个对象
//别忘了还要接收上面两个.vue文件里导出的，就是接收要显示的内容啦
import Home from '../components/home'
import About from '../components/about'
const routes = [
{
path:'/home' //只要路径里出现/home，就会显示下面这个组件里的内容
component:Home //再把导入的放在这里
},
{
path:'/about'
component:About
}
]
这时我们要回到**App.vue**文件（也就是根组件）里去使用
和
就是给上面这两个子组件一个开启的方法
<template>
<div id = "app">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
//有了router-view才会显示出内容，并且确定显示的位置
//是在标签的上面还是下面或是左边右边
</div>
</template>
<script>
export default {
name:'App'
}
</script>
三、配置的目录结构
