极客观点
项目管理
HarmonyOS
初接触vue,vue-router <router-view></router-view>渲染空白,但没有任何错误提示,下面是代码:
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import {router} from './router'
import store from "./store";
Vue.config.productionTip = false
new Vue({
el: '#idx',
router: router,
store: store,
render: function (h) {
h(App);
}
})
router 的index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import iView from 'iview';
import Cookies from 'js-cookie';
import Util from '../utils/util';
import {loginRouter} from './router';//引入路由
Vue.use(VueRouter);
const RouterConfig={
routes: [loginRouter]
};
export const router =new VueRouter(RouterConfig);
//守卫
router.beforeEach((to,from,next)=>{
iView.LoadingBar.start();
//前序拦截
if(to.name==='login'){
console.log("next");
next();
}else{
console.log("next({name: 'login'})");
next({name: 'login'});
}
});
router.afterEach((to) => {
//后续收尾
iView.LoadingBar.finish();
window.scrollTo(0, 0);
});
router.js
export const loginRouter = {
path: '/login',
name: 'login',
meta: {
title: 'Login - 登录'
},
component: resolve => { require(['@/components/login.vue'], resolve); }
};
login.vue 在components
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'login',
data () {
return {
msg: 'Login'
}
}
}
</script>
以上 dev运行后 空白页,
请帮忙分析一下问题,谢谢！
这种错误多半是要插入的组件有错误，导致渲染不出来，但是错误信息被吃掉了。解决方案是直接渲染那个组件，不通过 vue-router，就能看到错误，然后排除掉，即可。