Vue中的路由vue-router

1. 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

2. 前端路由：key是路径，value是组件。

第一步：安装vue-router

 安装  npm i vue-router@3   //在vue2的项目中需要安装版本3.

第二步：在main.js中引入

第三步：创建router文件夹，在其下建立index.js文件

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

第四步：在模板中使用

 注意：

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

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

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