Develop Reference

Run mutation on Route change VueJS?

So i am using Vuex and have a simple mutation set up which console logs a message. I have two routes setup, the /which goes to my HelloWorld component and /another which goes to the AnotherWorld component. I am trying to setup a watch on my route so that when the route changes, it fires off the mutation. I did setup a watch but it doesn't seem to be firing off my mutation.
Check out this CodeSandbox.
Check out the code snippet:-
This is My Vuex Store:-
mutations: {
routeChange() {
console.log("Helloooo!!!!!");
}
This is My Hello World Component:-
<template>
<div>
<h1>Hello World!!!</h1>
<router-link to="/another">Switch</router-link>
</div>
</template>
<script>
export default {
name: "HelloWorld",
watch: {
$route(to, from) {
this.$store.commit("routeChange");
}
}
};
</script>
This is my AnotherWorld Component:-
<template>
<div>
<h1>Another World</h1>
<router-link to="/">Back</router-link>
</div>
</template>
<script>
export default {};
</script>
As you can see i have setup the watch but it doesn't seem to be doing anything. Any help will be appreciated. Thank you.

I would instead use a global after hook navigation guard in your router.
For example
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [...]
})
router.afterEach(() => {
store.commit('routeChange')
})
export default router
If you only want to catch route navigation away from certain components, you can use the beforeRouteLeave in-component guard
// MyComponent.vue
export default {
name: 'MyComponent',
beforeRouteLeave (to, from, next) {
this.$store.commit('routeChange')
next()
}
}

If you put watchers in individual route components they will never fire because $route is set before these components instantiation and is then changed after these components destruction.
You either need to put the watch in App.vue (parent of <router-view>), or commit from one of the vue-router guards (https://router.vuejs.org/guide/advanced/navigation-guards.html)

How to make the vue router link connect to the vue component?

I am very new to the Vue framework, as well as Javascript, but am currently building a site using Vue and I want to have some links at the top of my site that the user can navigate to. I have tried using the Vue Router (https://router.vuejs.org/guide/#javascript) in order to make these links. At this point, I just want to make a little 'About Us' section that the user can navigate to. But, despite the URL changing accordingly to 'localhost:8080/#/about_us', the Vue component that I have associated with the link will not show up.
I have structured my code in the main.js as such:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.config.productionTip = false
export const eventBus = new Vue();
Vue.use(VueRouter);
const AboutUs = {template: '<div>about_us</div>'};
const route = [{path:'/about_us', component: AboutUs}];
const router= new VueRouter({route});
new Vue({
render: h => h(App),
router
}).$mount('#app')
And then I have my app.vue designed as (note: I reduced much of the code to its essentials for brevity):
import AboutUs from './components/AboutUs.vue'
import { eventBus } from './main.js'
export default {
data(){
return {
films: []
}
},
components: {
"about-us": AboutUs
},
mounted(){
fetch('https://ghibliapi.herokuapp.com/films')
.then(res => res.json())
.then(films => this.films = films)
.catch(error=> console.log(error))
}
}
</script>
body {
background-color: deepskyblue;
}
<h1>Ghibli Fandom Extravaganza</h1>
<nav>
<li><router-link to="/about_us">About us </router-link></li>
<router-view></router-view>
</nav>
<p>List of Ghibli Movies: <films-list :films="films"/></p>
<film-detail />
At this point, my AboutUs component is only a very basic Vue that shows some information about the site in some simple HTML tags. But although the link is active and does work, the information from the Vue is not displayed, while the other Vue components continue to show, which indicates that maybe they are not connected? I have tried to follow the tutorial in the Vue Router site, but I don't think that I understand the mechanics of how the code actually works. Can anybody recommend me any corrections?
UPDATE:
Here is the code to my AboutUs.vue
<template>
<div>
<h1>This site is for examining the movies of Studio Ghibli</h1>
</div>
</template>
<script>
export default {
name: 'about-us'
}
</script>
<style scoped>
</style>

I think there is no need to import 'aboutus' component. You can just write like this <router-link to="about_us">About us </router-link>
and in the main.js declare the route like this
const route = [{path:'/about_us',name:'about_us', component: () => import("path to about us file")}];

The code samples you provided are a bit confusing, you should simply pass an imported view straight in to the component property of a router entry.
Where you have done:
const AboutUs = {template: '<div>about_us</div>'};
Replace that line with:
import AboutUs from './components/AboutUs.vue'
I can't figure out from your sample, when and what the relevance of components: {"about-us": AboutUs }, it is not needed.
Here is a sample of my setup:
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'index',
component: () => import('../components/views/welcome')
},
{
path: '/about-us',
name: 'about-us',
component: () => import('../components/views/about-us')
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
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')
App.vue
<template>
<v-app v-cloak>
<router-link :to="{ name: 'index' }">Welcome</router-link>
<router-link :to="{ name: 'about-us' }">About Us</router-link>
<router-view></router-view>
</v-app>
</template>
<script>
export default {
name: 'App'
}
</script>
components/views/about-us.vue
<template>
<div>This is the About Us page!</div>
</template>
<script>
export default {
name: 'about-us'
}
</script>
This sample uses History Mode
Other things to note
When routing, mounted is unreliable, instead you should place any fetch logic into it's own method when calling any :
methods: {
fetch () {
// https://github.com/axios/axios
axios.get('https://ghibliapi.herokuapp.com/films').then( ... )
}
}
Call this.fetch method in both beforeRouteUpdate and beforeRouteEnter instead of mounted, you can't even rely on created when it comes to views handled by vue-router.
Axios is suggested instead of native fetch because axios provides more functionality, features and browser compatibility.
In about-us.vue you add these Navigation Guards like so:
<template>
<div>This is the About Us page!</div>
</template>
<script>
export default {
name: 'about-us'
methods: {
fetch () {
axios.get('https://ghibliapi.herokuapp.com/films').then( ... )
}
}
// Will fire if you are already on the view but a parameter changes (dynamic routing)
beforeRouteUpdate(to, from, next) {
this.fetch()
next()
},
// Will fire when you enter the view
beforeRouteEnter(to, from, next) {
this.fetch()
next()
},
}
</script>
Both should be added, understand that they won't fire at the same time, only one of them will execute fetch once when relevant.
This will resolve any issues you would otherwise encounter with Dynamic Routing should you ever use them.
Folder Structure
src/
+ App.vue
+ main.js
+ router.js
+ vue.config.js
+ assets/
+ logo.png
+ components/
+ views/
+ welcome.vue
+ about-us.vue
Hope this clears up the setup requirement for you.

vue-router: browser attempts to open <router-link> as a local file

I'm new to Vue-router and can't figure out what's gone awry. Clicking on a navigation link causes the desired component to be displayed for an instant, but then the browser tries to open the component as if it were a file.
For example, clicking on the "Badger!" link results in the browser attempting to open a local file named file:///home/travis/.../prototype/dist/badger which of course results in a file not found error.
Any insights on this? I've tried to follow existing examples carefully.
main.js:
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Badger from './component/Badger.vue';
import Grid from './component/Grid.vue';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/badger', component: Badger },
{ path: '/grid', component: Grid },
]
});
new Vue({
el: '#app',
router,
render: h => h(App),
});
App.vue
<template>
<div id="app">
<ul>
<li>
<router-link to="/badger">Badger!</router-link>
</li>
<li>
<router-link to="/grid">Data!</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
mounted() {
console.log('mounted App component')
},
data() {
// ...
}
},
}
</script>
<style>
// ...
</style>

When the router is in history mode, the build artifacts must be delivered to the browser from an http server, as #bigless mentioned.
If your workflow requires opening the build artifact from the local filesystem, that can be done if you remove these lines from the router declaration:
mode: 'history',
base: __dirname,
This will put you in "hash mode" (the default state). Your artifact can then be loaded either from an http server or from the local filesystem.
Relevant docs: https://router.vuejs.org/guide/essentials/history-mode.html

vue component not showing by router

I'm new to VueJs. I'm try to develop a theme using VueJs, I'm facing a problem by router, 'component not showing'. here is my code
Pagea.vue
<template>
<div>
<h1>Hello This is a test</h1>
</div>
</template>
<script>
export default {
name : "Pagea"
}
</script>
App.vue
<template>
<div id="app">
<router-link to="/">Go to Foo</router-link>
<router-link to="/Pagea">Go to Bar</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
components: {
Header,
Footer
}
}
</script>
main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
Vue.use(BootstrapVue);
Vue.use(VueRouter);
Vue.config.productionTip = false;
//Router
import Pagea from './components/Pagea.vue';
const routers = [
{
path: '/pagea',
name : 'Pagea',
component : Pagea
}
];
const router = new VueRouter({
routers,
mode : 'history'
});
new Vue({
router,
render: h => h(App)
}).$mount('#app')
There is no console error, but still to result. i don't know why the component or data not showing only empty page. please anyone could tell me what i did miss. As i early mansion that i'm new and still learning. Thank you.

The more sure, the issue is that your:
<router-link to="/Pagea">Go to Bar</router-link>
Should be:
<router-link to="/pagea">Go to Bar</router-link>
Since you have it declare as such in your router:
{
path: '/pagea', /* lower-case here */
name : 'Pagea',
component : Pagea
}
.....................................................................................................
However, if that doesn't solve it, then try the following:
Try the following and let me know if it did work for you.
Pagea.vue, remove the export and set the className to the div tag:
<template>
<div class="pagea">
<h1>Hello This is a test</h1>
</div>
</template>
Keep your vue files as clean an simple as you can.
Don't go mixing stuff there.
Remove the export out of your App.vue and make sure your to matches as case-sensitive.
In this case, you were indicating to go to '/Pagea' when your route was setup for '/pagea'
<template>
<div id="app">
<router-link to="/">Go to Foo</router-link>
<router-link to="/pagea">Go to Bar</router-link>
<router-view></router-view>
</div>
</template>
Move your router code into its own JS file:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Pagea from './components/Pagea.vue';
let routes = [
{
path: '/pagea',
name : 'pagea', /* Keep the name lowercase as in the className */
component: Pagea
}
];
export default new Router({
routes: ...
}
It will make your code cleaner and easier to maintain than everything in one file.
Then you can call your router.js in your main.js
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')

Vue router button not clickable because setup is incorrect

I'm trying to setup Vue router for the first time and I'm running into trouble.
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Services from '../components/Services'
import App from '../app'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'App',
component: App
},
{
path: '/services',
name: 'Services',
component: Services
}
]
})
app.vue
<template>
<div id='app'>
<Navigation></Navigation>
<div class="Site-content">
<router-view></router-view>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Services from "../javascript/components/Services";
import Footer from "../javascript/components/Footer";
import Navigation from "../javascript/components/Navigation";
export default {
components: {
Footer,
Navigation,
Services
},
data: function () {
return {
message: "Welcome to Ping Party From Vue!"
}
}
}
</script>
Navigation.vue
<template>
<div id="navigation">
<nav v-bind:class="active" v-on:click>
Home
Projects
<router-link to="/services">Services</router-link>
Contact
</nav>
</div>
</template>
<script>
import Services from './Services'
export default {
data () {
return { active: 'home' }
},
methods: {
makeActive: function(item) {
this.active = item;
}
}
}
</script>
That vue-router option is not working in my navigation. It shows up on the page but it's not clickable and I'm getting this error in the console.
ERROR
Unknown custom element: <router-link> - did you register the component
correctly? For recursive components, make sure to provide the "name"
option.
found in
---> <Navigation> at app/javascript/components/Navigation.vue
<App> at app/javascript/app.vue
<Root>
Unknown custom element: <router-view> - did you register the component
correctly? For recursive components, make sure to provide the "name"
option.
found in
---> <App> at app/javascript/app.vue

Make sure to register your router with your Vue instance.
So in your
import router from './router'
new Vue({
el: '#some-element'
router, // This line is important
render: h => h(App)
})