I use Vue 2 in CLI mode with webpack-simple. I have following files:
main.js:
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Routes from './routes';
Vue.use('VueRouter');
const router = new VueRouter({
routes: Routes,
});
new Vue({
el: '#app',
render: h => h(App),
router: router,
});
App.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import Loader from './Loader.vue';
export default {
name: 'app',
}
</script>
<style lang="scss">
</style>
routes.js:
import Game from './components/Game.vue';
import Login from './components/Login.vue';
export default [
{ path: '/', component: Game, name: "Game" },
{ path: '/login', component: Login, name: "Login" },
]
Game.vue and Login.vue looks the same:
<template>
<div>
Game
</div>
</template>
<script>
export default {
name: 'game',
}
</script>
<style lang="scss">
div {
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
unfortunately starting a file gives me an error:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Also router-view tag is not changed to proper html. I use vue router for the first time. It' been installed via npm in version 3.0.1
Any advice?
To have the Vue-Router routes be rendered you will need to pass the <router-view> tag inside a Vue component. You could also access the routes from an <a> tag, but this will trigger a page re-render, to avoid this behavior you could use router-link with the to property instead of a href .
You need to do the following:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
Ref: https://router.vuejs.org/en/installation.html
new Vue({
el: "#app",
router: router,
render: h => h(App),
})
Hope it will help you
Change:
Vue.use('VueRouter');
To:
Vue.use(VueRouter);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With