Vue框架内容无法正常显示

最新推荐文章于 2024-05-27 14:44:52 发布

我咋就这么菜呢

最新推荐文章于 2024-05-27 14:44:52 发布

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： Vue无法显示

本文链接：https://blog.csdn.net/qq_40407724/article/details/100042837

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在学习 Vue 框架路由一节是，出现了如下问题，在创建了组件和路由对象，页面无法正常显示，代码如下：

<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script>
	var header = {            
	    template: '<h1>这是头部</h1>'        
	}        
	var leftBox = {            
	    template: '<h1>这是导航栏</h1>'        
	}        
	var mainBox = {            
	    template: '<h1>这是内容区</h1>'        
	}
	
	var routerObj = new VueRouter({            
	    routes: [
	        { path: '/',  component: header },                
		{ path: '/left', component: leftBox },                
		{ path: '/main', component: mainBox }]        
	})
        var vm = new Vue({            
       	    el: '#app',            
            data: {},            
            methods: {},            
            router: routerObj        
        });   
    </script>
</body>

解决方法：
出现这个问题之前一直没有注意到，解决方法是将组件代码和路由对象代码互换位置，将创建组件的代码放在创建路由对象代码之上，就可以正常显示了。至于为什么是这样，我还没有搞清，希望有大佬能评论给我讲解，笔芯~

我咋就这么菜呢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架内容无法正常显示

在学习 Vue 框架路由一节是，出现了如下问题，在创建了组件和路由对象，页面无法正常显示，代码如下：<body> <div id="app"> <router-view></router-view> </div> <script> var header = { ...
复制链接

扫一扫

专栏目录