最近搭个vue项目玩耍,到路由这里卡住了,网上看了很多好像这个问题遇到的不是很多,不知道是哪里出了问题,前台看router-link标签没有编译成a,浏览器敲/list也没有变化,希望各位老司机带一下,不胜感激
main.js
import Vue from 'Vue'
import Index from './page/index/index.vue'
import router from './routers'
Vue.config.debug = true;
const app = new Vue({
router,
render: h => h(Index)
}).$mount('#app')
routers.js
import Vue from 'Vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Index from './page/index/index.vue'
import List from './page/list/list.vue'
Vue.use(VueRouter);
Vue.use(VueResource);
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{
path: '/list',
name:'list',
component: require('./page/list/list.vue')
}
]
})
export default router
list.vue
<template id="list">
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
<router-link to="/">首页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
message: 'This is list!'
}
}
}
</script>
<style>
html{
background: #f1f1f1;
}
</style>
index.vue
<template>
<div id="app2">
<p>{{ message }}</p>
<input v-model="message">
<router-link to="/list">list</router-link>
<router-view class="view"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello World!'
}
}
}
</script>
<style>
html{
background: #f1f1f1;
}
a{
color:red;
}
</style>
router view 应该放在 index 里面,放到 list 里面当然渲染不出来