problems encountered when using view-router. Here are my project files
mian.js:
//Vue
import Vue from "vue";
//
import VueRouter from "vue-router";
//app.vue
import App from "./app.vue"
//vue-router
Vue.use(VueRouter);
//,
const Routers = [
{
path:"/index",
components:(resolve) => require(["./views/index.vue"],resolve)
},
{
path:"/about",
components:(resolve) => require(["./views/about.vue"],resolve)
},
{
path:"*",
redirect:"/index"
}
];
//:
const RouterConfig = {
//HTMLHistory-sharp
mode:"history",
//base:__dirname,
routes:Routers
};
//
const router = new VueRouter(RouterConfig);
//Vue
new Vue({
router:router,
render: h =>{
return h(App)
}
}).$mount("-sharpapp");index.vue:
<template>
<div></div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>app.vue:
<template>
<div>
<router-link to="/index">index</router-link>
<router-link to="/about">about</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link rel="stylesheet" type="text/css" href="/dist/main.css">
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html> after starting with webpack-dev-server:
clicking index and about url will change, but router-view will not render any results, but will show a HTML comment. Ask the great god to explain! I found a lot on the Internet. I didn"t write wrong about what routes was written as routers and so on.
