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区域内。将




放置到
中,问题解决

在这里插入图片描述

©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页