环境搭建
创建项目
设置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')