问题:抱着学习的目的,我搭了个webpack-simple脚手架的Demo,在使用router路由的时候,页面加载一直是白板。在index.html以及main.js打印console.log()标记,结果index.html有打印出数据,main.js没有任何数据输出。折腾了好久,一直不行。 寻求帮助
贴代码:
main.js
console.log('main.js');
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Regist from './Regist.vue'
import Login from './Login.vue'
Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.config.productionTip = false
//路由
const router = new VueRouter({
routes:[
{ path: '/', component: App },
{ path: '/login', component: Login },
{ path: '/regist', component: Regist }
],
mode:'history'
})
new Vue({
el: '#app',
router,
template: '<App/>',
render: h => h(App)
})index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>page</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
console.log('index.js');
</script>
</html>
App.vue
<template>
<div id="app">
<h1>APP</h1>
<li>
<router-link to="login">登陆</router-link>
<router-link to="regist">注册</router-link>
</li>
<Login/>
<router-view></router-view>
</div>
</template>
<script>
import Login from "./Login";
export default {
name: 'app',
components: {Login},
data () {
return {
}
}
}
</script>
<style>
</style>
Login.vue
<template>
<div id="login">
<h1>登陆</h1>
</div>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>
Regist.vue
<template>
<div id="regist">
<h1>注册</h1>
</div>
</template>
<script>
export default {
name: "Regist"
}
</script>
<style scoped>
</style>源码地址:
https://gitee.com/hail2017/vue-demo.git