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:'

首页

'
} const News={template:'

新闻

'
} const Hot={template:'

热点

'
} //Vue.extend(template:'

首页

')
//配置路径 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无法渲染的解决方法,不止是routes写错为router偶?_第1张图片
问题解决:
仔细观察代码层次结构,发现,vue-router没有在vue实例的div区域内。将




放置到
中,问题解决

vue-router无法渲染的解决方法,不止是routes写错为router偶?_第2张图片

你可能感兴趣的:(vue)