vue-router沒有渲染頁面
網上內容一般問題都是將routes寫成了router,而我的問題不是這個,仔細觀察代碼沒有錯誤啊。
<body>
<div id="app">
<ul>
<li >
<router-link to="/home">首頁</router-link>
</li>
<li >
<router-link to="/news">新聞</router-link>
</li>
<li >
<router-link to="/hot">熱點</router-link>
</li>
</ul>
</div>
<div class="show">
<router-view></router-view>
</div>
</body>
<script>
const Home={template:'<h2>首頁</h2>'}
const News={template:'<h2>新聞</h2>'}
const Hot={template:'<h2>熱點</h2>'}
//Vue.extend(template:'<h1>首頁</h1>')
//配置路徑
const routes=[
{
path:'/home',component:Home
},
{
path:'/news',component:News
},
{
path:'/hot',component:Hot
}
]
//創建router
const router = new VueRouter({
routes
})
const vm = new Vue({
el:'#app',
router
})
問題解決:
仔細觀察代碼層次結構,發現,vue-router沒有在vue實例的div區域內。將
放置到