一、路由的配置和使用
1、引入router
- 在创建项目的时候可以默认用Vue脚手架中的自动生成路由文件
- 或者自己下载（注意vue和vue-router版本的对应关系）
2、创建路由组件并引入：
- 在views文件夹中创建2个.vue文件作为路由组件：
- 引入路由组件：
在router文件夹下的index.js中引入2个路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'
3、将路由与组件进行映射
4、创建router实例，传入router配置
// 创建router实例，传入router配置
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
5、将router实例对外进行暴露
// 将router实例对外进行暴露
export default router
6、 将router挂载到根节点上
7、设置路由出口
将路由匹配到的组件渲染到对应的位置
<router-view></router-view>
二、过程中遇到的问题
（欸2个不起眼又愚蠢的小错误花费了我不少时间！！！）
1、配置路由后没效果
配置完路由并运行项目后，代码没有报任何错误，但是路由对应的效果没有显示出来。后面仔细核对了网上成功的一些例子，发现居然是component单词拼错了，缺少了一个字母，导致代码没有报错但是路由效果也没出来。
2、配置子路由后没效果
后面跟着教程试了一下子路由，发现父级路由效果出来了，但是子路由效果没有出来。后面发现子路由的关键字children首字母要小写，而我弄成大写的了，改过来之后，效果和页面均正常。
3、其他
- router文件夹下的index.js代码：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User.vue'
import Main from '../views/Main.vue'
Vue.use(VueRouter)
// 将路由与组件进行映射
const routes = [
// 主路由
{
path:'/',
component: Main,
// 子路由
children:[
{path:'home', component: Home},
{path:'user', component: User}
]
}
]
// 创建router实例，传入router配置
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 将router实例对外进行暴露
export default router
- main.js代码
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI);
// 将实例挂载到根节点上
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
