vue-router 2.0 路由不生效 router-link没有渲染成a

最近搭个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>

图片描述

图片描述

阅读 10.3k
2 个回答

router view 应该放在 index 里面,放到 list 里面当然渲染不出来

有人问过这个问题,他已经解决了,你看下是不是和你的情况一样。
https://segmentfault.com/q/10...
好吧,没看到第二答是你...
文字是有的,只是没渲染成 a 是吧?

推荐问题
宣传栏