vue各路径，组件都没问题，但页面空白

App.vue

<template><div id="app"><!-- 路由占位符 --><router-view></router-view></div>
</template><script>
export default {name: 'app'
}
</script>
<style>
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
Vue.use(Router)// const routes = [
// ]const router = new Router({routes: [{ path: '/', components: Login },{ path: '/login ', name: 'login', components: Login }]
})export default router

Login.vue

<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/avatar.jpg" alt=""></div></div></div>
</template><script>
export default {}
</script>
<style lang="less" scoped>
.login_container{background-color:#e5abbe;height: 100%;
}
.login_box{width: 450px;height: 300px;background-color:#fdeff2;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
}
.login_box .avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow:0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%,-50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入全局样式表
import './assets/css/global.css'
Vue.config.productionTip = falsenew Vue({router,render: function (h) { return h(App) }
}).$mount('#app')

显示页面空白

解决：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
Vue.use(Router)// const routes = [
// ]const router = new Router({routes: [{ path: '/', component: Login },{ path: '/login ', name: 'login', component: Login }]
})export default router

一定要注意细节问题，components应该是component

vue各路径，组件都没问题，但页面空白相关推荐

【vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud】
vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答
vue.config.js配置configureWebpack的optimization splitChunks页面空白
确实通过这种方式解决: vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答原因可能是这个: Taro项目 ...
vue使用el组件在el-tabs中刷新页面保持不变
问题: 在使用elementUI的el-tabs时,会遇到这样一个问题.就是当你切换到第一个标签页后面的标签页,刷新页面,会回到第一个标签页.原因是因为切换标签页,是页面局部刷新.刷新页面,是页面整个 ...
使用vue+iview Form组件按enter键阻止页面刷新
如果我们在Form组件中嵌套使用Input组件的时候,会有一个小问题,如果我们在一个Form组件中只使用了一个Input组件,当该Input组件获取焦点的时候,我们按enter键,整个页面会刷新解决 ...
vue uni-app 公共组件封装，防止每个页面重复导入
1.公共插件实现目标,将公共组件或者网络请求直接在this中调用,不需要再页面引用 #例如网络请求 var _this = this;this.api.userInfo({token: ''}#通用 ...
vue cli4 使用360兼容模式和IE11页面空白报 SCRIPT1002：语法错误
在网上找了很多方法去解决,都不行,最后在崩溃的边缘成功了,在此总结记录一下. 第一步,vue cli4会自带core-js依赖,可以在package.json中查看是否有依赖,有的话直接在main.j ...
vue路由切换组件没有加载_vue-router 路由跳转后没有加载组件
router.js 路由部分 export const normalRouter = { path: '/', meta: { login: false }, component: () => ...
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
vue路由参数改变，组件数据没重新更新问题
最近一段时间在用vue做项目,遇到一个很纠结的问题,本来是两个页面样式结构相似,就是数据不同,所以在router里面配置了一个id参数,发现vue路由参数改变,组件数据没重新更新,查了一下官方文档,发 ...

vue各路径，组件都没问题，但页面空白

App.vue

index.js

Login.vue

main.js

显示页面空白

解决：

vue各路径，组件都没问题，但页面空白相关推荐

最新文章

热门文章