Vue router的安装及基础用法

一、 Vue router安装
1.打开Vue项目，在终端中输入安装命令
命令如下：
npm install vue-router
cnpm install vue-router
yarn add vue-router（这里推荐使用第三种方法，速度快报错几率小）

2.安装成功后在src中新建router.js文件，引入代码：

3.在components中新建Conten.vue（不强制要求）

4.在src页面下中新建view文件夹，在view新建文件夹，例如Home，在文件夹中新建index.vue，导入上一步的Content并引入如下代码：

5.在router.js中设置如下两步
第一步：
import Home from ‘./views/Home/’ 导入之前的Home文件夹
第二步：
export default new VueRouter ({
routes: [
{
path: ‘/’,
redirect: ‘/home’ //设置默认指向
},
{
path: ‘/home’, 此处是之前给页面起的别名
component: Home
}，
]
})
6.在App.vue中的div内引入

7.在main.js中 import router from ‘./router’

效果图如下：