first contact with vue,vue-router < router-view > render blank < / router-view > without any error prompt. Here is the code:
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: "-sharpidx",
router: router,
store: store,
render: function (h) {
h(App);
}
})
index.js of router
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 in components
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "login",
data () {
return {
msg: "Login"
}
}
}
</script>
the blank page of the above dev after running,
Please help to analyze the problem, thank you!
