I'm trying to get my head round vue-router. I'm used to instantiating Vue like this...
vm = new Vue({
el : '#vueRoot',
data : { msg : 'hello' }
...
})
Now I'm being asked to instantiate it passing the router...
vm = new Vue({
router
}).$mount('#vueRoot');
My question is where do I put my data or methods, or whatever other Vue properties I would normally use? I see that my root Vue can have markup, with router-link elements. Am I to understand that, once I use the router, everything should be in components?
You can use your default notation:
new Vue({
el: '#app',
router,
template: '<MyApp/>',
components: { MyApp }
})
But you must have a <router-view/> Element in your template.
In your Main.js
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Overview from '../components/Overview.vue';
import Sale from '../components/Sale.vue';
Vue.use(VueRouter);
let routes = [
{path: '/home', component: Overview,name:'Overview'},
{path: '/sale', component: Sale, name:'Sale'},
];
const router = new VueRouter({
mode: 'history',
routes
});
const app = new Vue({
el: '#vueRoot',
router,
});
In your Root View place element
<router-view></router-view>
In your links
<router-link to="/sale" class="nav-link">
<i class="nav-icon fas fa-cart-plus "></i>
<p>
Point of Sale
</p>
</router-link>
In your Views
<template>
<v-app>
{{viewTitle}}
{{viewSubtitle}}
</v-app>
</template>
<script>
export default {
data() {
return {
viewTitle:'Home',
viewSubtitle:'description',
}
},
methods: {
YourMethod_1() {
},
YourMethod_2() {
},
}
}
</script>
This is how the latest versions of Vue.js works with router
import App from './App';
import VueRouter from 'vue-router';
import {routes} from './routes';
const router = new VueRouter({
routes,
mode: "history", // you can remove this if not required
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
routes.js
export const routes = [
// your components as objects
]
App.vue
<template>
<div>
<router-view/>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
Related
I got my Vue.js application, i've installed vue-router, via npm i vue-router,
i got a router-link on my main page App.vue, and i want to redirect to my Inscription.vue.
I do go on the http://localhost:8080/inscription when i click on the router-link, but the view doesnt change, im still on my main page,
i don't understand why ? (i got no error)
My main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Vue.use(router);
My router/index.js :
import Vue from 'vue'
import Router from 'vue-router'
import App from '../App.vue'
import Inscription from '../Inscription.vue'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'Home',
component: App
},
{
path: '/inscription',
name: 'Inscription',
component: Inscription
}
]
const router = new Router({
mode: 'history',
routes: routes
});
export default router;
My App.vue simplified
<template>
<div class="acceuil_main">
<div class="navbar_element">
<router-link :to="{name: 'Inscription'}">Inscription</router-link>
</div>
</div>
</template>
<script>
export default {
name: "App",
data () {
return {
beers: null,
connected: false,
user: null
}
}
};
</script>
My Inscription.vue simplified
<template>
<div class="acceuil_main">
<a class="navbar_element">
Inscription
</a>
</div>
</template>
<script>
export default {
name: "Inscription",
data () {
return {
title: "Inscription",
connected: false,
user: null
}
}
};
</script>
a picture of my folder architecture
For router to actually work you need a <router-view> component somewhere in your app. The best place is probably the App component. Check the docs
<router-view> works as a placeholder - router put there the component configured for a route when the route is active.
In that sense your / route should probably not use App component but something else - create another component for example Home which will be displayed on the root route (/)
const App = Vue.component('App', {
name: "App",
template: `
<div class="acceuil_main">
<div class="navbar_element">
<router-link :to="{name: 'Inscription'}">Inscription</router-link>
</div>
<router-view></router-view>
</div>
`
})
const Inscription = Vue.component('Inscription', {
template: `
<div>Inscription</div>`
})
const routes = [{
path: '/inscription',
name: 'Inscription',
component: Inscription
}]
const router = new VueRouter({
mode: 'history',
routes: routes
});
new Vue({
router,
render: h => h(App)
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
I'm sure i'm doing something stupid, but i just can't get this to work.
I defined routes in a separate js file, imported that into a newly created router, that i mounted in vue.
In the vue devtools i do see my named routes, but where the RouterView is in the vue devtools, the html shows
Routes.js:
import Home from '#/Views/Home.vue';
import NewProefwerk from '#/Views/NewProefwerk.vue';
const routes = [
{
path: '/',
name: 'home',
Component: Home
},
{
path: '/Nieuw',
name: 'new',
Component: NewProefwerk
}
];
export default routes;
main.js:
import VueRouter from 'vue-router';
import routes from '#/Routes'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
base: '/',
routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app');
App.vue:
<template>
<div id="app">
<Navigation></Navigation>
<router-view></router-view>
</div>
</template>
<script>
import Navigation from '#/components/Navigation.vue';
export default {
name: 'app',
components: {
Navigation
}
};
</script>
Try to change Component to component.
UPDATE:
It magically starts to work later on after I clear browser cache, I do not know what happened before.
I wonder how to include router-view in a component rather than directly use it?
For Example:
main.js
import Vue from 'vue'
import router from "./router"
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App),
router
})
App.vue
<template>
<div>
<page-content></page-content>
</div>
</template>
<script>
import pageContent from "./page-content.vue";
export default {
name: 'app',
data() { return {}; },
components: {
"page-content": pageContent
}
}
</script>
page-content.vue
<template>
<div class="page-content">
<router-view>
</router-view>
</div>
</template>
<script>
export default {
}
</script>
router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [{ path: '/', component: Foo }]
export default new VueRouter({
routes
})
The problem is I can not see foo shown up on page
I am a noob to vue-router. Here is my code,I want to render User compoent, when I navigate to http://localhost:8080/users
App.vue file:
<template>
<div id="app">
<h1>{{msg}}</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Users.vue
<template>
<div>
<h1>xue yan</h1>
</div>
</template>
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Users from './Users.vue'
Vue.use(VueRouter);
const routes = [
{path:'/users',component:Users}
];
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
But, I can't see the Users component in my index.html,when I try to navigate to "http://localhost:8080/users".All the files come from vue-cli webpack-simple. what's more, there is no error in console.I can't tell what's wrong with it.
add history mode to your router as follows
const router = new VueRouter({
mode: 'history',
routes,
});
Without history mode on you need to add # in your search like this http://localhost:8080/#/users to make it work.
More about why history mode read the docs here
When I try to access the vuex store inside a random component, undefined is returned. However, I injected the store into my Vue object. Does anyone know how to solve this? I could import the store object into every component manually, but that's not really clean...
My files look like this:
main.js
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import VueI18n from 'vue-i18n'
import routes from './config/routes'
import locales from './lang/locales'
import store from './store'
//Routing support
Vue.use(VueRouter);
//Backend support
Vue.use(VueResource);
//Language support
Vue.use(VueI18n);
Vue.config.lang = 'nl';
Object.keys(locales).forEach(function (lang) {
Vue.locale(lang, locales[lang])
});
const router = new VueRouter({
store,
mode: 'history',
base: '/app/',
routes: routes
});
new Vue({
router
}).$mount('#app');
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import fleet from './modules/fleet'
Vue.use(Vuex)
export default new Vuex.Store({
modules : {
fleet
}
})
app.vue
<template>
<div id="page-content-wrapper">
<nav-bar></nav-bar>
<div class="container-fluid">
<div class="row">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import NavBar from './assets/navBar.vue'
export default {
created() {
console.log(this.$store)
},
components: {
NavBar
}
}
</script>
this.$store returns undefined
const router = new VueRouter({
store,
mode: 'history',
base: '/app/',
routes: routes });
new Vue({
router }).$mount('#app');
Store is designed to be set up in new Vue:
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
You've placed it into VueRouter instance instead.
Proper code combined:
const router = new VueRouter({
routes,
mode: 'history',
base: ...
});
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})