vue2项目创建详细过程——（二）配置路由

1、安装 vue-router 包
在项目文件夹下，安装（cmd内或者在hbuilder内）
npm install vue-router@3.2.0 --save 低版本路由

以下3个都是高版本的，如果用vue2会因为版本不一致报错
npm install vue-router@4
npm i vue-router -S
npm install --save vue-router

2、创建路由模块
按照以下路径创建index.js
src/router/index.js

01.导入vue 和 vuerouter 的包

import Vue from 'vue'
import VueRouter from 'vue-router'

02.调用vue.use() 函数，把 VueRouter 安装为 Vue 的插件
//vue.use()函数的作用，就是来安装插件的

Vue.use(VueRouter)

03.创建路由的实例对象

const router = new VueRouter()

04.向外共享路由的实例对象

export default router

整体代码为：index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter()
export default router

3、导入并挂载路由模块
main.js
//在 vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
在 main.js 中导入路由模块

整体代码为：main.js
import router from '@/router/index.js'

new Vue({
render: h => h(App),
//router:路由的实例对象
//router: router 属性值和名相同可以简写
router
}).$mount('#app')