vue router基础

在vue中，路由是route，就是一个键值对，路径是key，组件是value；
路由器是router，管理所有的路由
1.安装vue-router，命令 npm i vue-router
2.应用插件：Vue.use(VueRouter)
3.编写router配置项
创建一个全局的路由器router
在文件中创建一个router文件夹，里面写一个名为index.js的文件
文件中的内容为：

//改文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../componments/About'
import About from '../componments/Home'
//创建一个路由器，并将router暴露出去
export default new VueRouter({
routes:[{
	path:'/about',
	componment:About
	},
	{
	path:'/home',
	componment:Home
	}
]
})

4.实现切换（active-class可配置高亮样式）
在App.vue中的a标签改为router-link标签，将href属性改为“to”，将原来写的路径改为’’/about’’(也就是在routes里面写的path)，其他之前写的样式原封不动的放在原处

（这里将原来的active改成了active-class:’‘active’’,就是说，在该元素被激活的时候才有样式）
虽然，我们用的是router-link，但是渲染在浏览器中，仍然是a标签

以上实现了路由，但是并没有将home.vue和about.vue的内容展示在展示区，
5.指定展示位置
我们需要在指定组件的呈现位置那里写

<router-view></router-view>

Vue中借助router-link标签实现路由的切换，通过router-view实现组件的显示。

注意：
1.组件的分类
一般组件和路由组件
一般组件经常放在componments文件夹中，路由组件一般放在pages文件夹中

2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
用上面的home和about组件来举例，当点击home组件的时候about组件去哪了？
答：about组件消失不是被隐藏了，而是被销毁了

3.每个组件都要自己的$route属性，里面存储着自己的路由信息

4.整个应用只有一个router，可以通过组件的$router属性获取到