router-view无法渲染的问题解决

问题:router-view无法渲染

之前用vue-router做单页面网页时,路由配置完毕后,地址栏正常跳转,但router-view无法正常渲染,而且如果手动刷新,router-view可以正常渲染当前页面,但之前渲染好的页面又会消失。路由配置如下:

var Manage = {
		template:"#tplmanage"
	}
	var Borrow = {
		template:"#tplborrow"
	}
	var Recommend = {
		template:"#tplrecommend"
	}
	var Donate = {
		template:"#tpldonate"
	}
	var Bookmsg = {
		template:"#tplbookmsg"
	}
	var Borrowmsg = {
		template:"#tplborrowmsg"
	}
	var routes = [
		{path:"/",component:Manage,children:[
			{path:"/",component:Bookmsg},
			{path:"/bookmsg",component:Bookmsg},
			{path:"/borrowmsg",component:Borrowmsg}
		]},
		{path:"/borrow",component:Borrow},
		{path:"/recommend",component:Recommend},
		{path:"/donate",component:Donate}
	];
	var router = new VueRouter({routes});
	var vm = new Vue({
		el:"#app",
		//...
		router
	});

路由配置正确,且routes,router等特定变量名也没错

之前网上查的原因大多是routes,router变量名写错了,但这次问题不在这里

浏览器报错:

router-view无法渲染的问题解决_第1张图片

最后经排查发现,在html中,template组件放在了vue监控的div中并用v-if隐藏,以至于出现以上问题,将template组件全部放在vue监控的div外面即可解决。

你可能感兴趣的:(Vue.js,Vue,vue-router,template)