在Vue-cli中搭建router环境

环境搭建

创建项目

设置router-view

找到App.vue 删除App.vue中关于HelloWorld组件的多余部分，并且删除样式。在div#app中添加router-view

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {

  }
}
</script>

<style>

</style>

新建存放路由组件的目录

在src文件夹中新建目录 /views 用于存放路由组件

在src中新建 router.js

router.js的目的就是为了把new VueRouter作为模块，这样main.js中就可以直接引入该模块使用

router.js

// 引入Vue
import Vue from 'vue'
// 引入VueRouter
import Router from 'vue-router'
Vue.use(Router)
// 引入组件
import Index from '@/views/Index'
const routes = [
  {
    path: '/',
    component: Index
  }
]
const router = new Router({
  routes
})
// 将router导出
export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')