vue-router無法渲染的解決方法,不止是routes寫錯爲router偶?

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區域內。將




放置到
中,問題解決

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章