结合webpack使用vue-router
目录结构
main.js
import Vue from '../node_modules/vue/dist/vue.js'
import VueRouter from '../node_modules/vue-router'//导入vue
import app from './App.vue'
import account from './main/Account.vue'
import goodList from './main/GoodsList.vue'
// 手动安装VueRouter
Vue.use(VueRouter)
var router = new VueRouter({
routes : [
{path : '/account', component : account},
{path : '/goodList', component : goodList}
]
})
var vm = new Vue({
el : '#app',
data : {},
render : function (createElement){
return createElement(app)
},
router : router
})
Account.vue
<template>
<div>
<h1>这是Account组件</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>GoodsList.vue
<template>
<div>
<h1>这是goodslist组件</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>App.vue
<template>
<div>
<h1>this is app.vue</h1>
<router-link to='/account'>account</router-link>
<router-link to='/goodList'>goodList</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>