app.js
const app = new Vue({
el: '#wrapper',
router,
store
});
router.js
const router = new VueRouter({
routes,
hashbang: false,
mode: 'history',
})
router.beforeEach((to, from, next) => {
NProgress.start()
NProgress.set(0.1)
next()
})
router.afterEach(() => {
setTimeout(() => NProgress.done(), 500)
})
Error
NProgress is not defined
I have already installed vue-nprogress using npm still it's showing undefined. How to solve this issue? Thanks in advance!
Import and use the plugin in the main.js file as follows:
...
import NProgress from 'vue-nprogress'
Vue.use(NProgress)
const nprogress = new NProgress()
const app = new Vue({
el: '#wrapper',
router,
store,
nprogress
});
then in router.js access to that instance using router.app.$nprogress :
const router = new VueRouter({
routes,
hashbang: false,
mode: 'history',
})
router.beforeEach((to, from, next) => {
router.app.$nprogress.start()
router.app.$nprogress.set(0.1)
next()
})
router.afterEach(() => {
setTimeout(() => router.app.$nprogress.done(), 500)
})
Related
I want to manage cookies in the browser and use this external plugin vue-cookies. But if I call its window.$cookies.isKey(Cookies), I get an error: console.log(currentUser) = false.
Cookie exists on browser
Main.js:
import Vue from "vue"
import VueCookies from 'vue-cookies'
import App from "./App.vue"
Vue.use(VueCookies)
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
routes.js:
router.beforeEach((to, from, next) => {
const currentUser = window.$cookies.isKey(Cookies);
console.log(currentUser);
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!currentUser) {
window.location.href = "https://localhost";
} else {
next();
} {
next();
}
}
});
Any idea?
I do have the following code in my main.js file:
import Vue from 'vue';
import App from './components/App';
import router from './router';
const app = new Vue({
data: { loading: false },
router,
render: h => h(App),
}).$mount('#app');
Now i try to set the loading var from my router (./router/index.js):
router.beforeEach((to, from, next) => {
this.$root.loading = true;
next();
})
router.afterEach((to, from) => {
this.$root.loading = false;
next();
})
but it doesn't work. I always get
Cannot read property '$root' of undefined
Any ideas what I'm doing wrong?
You should use this in next callback because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet.
router.beforeEach((to, from, next) => {
//vm refers to this
next((vm)=>{vm.$root.loading = true;});
})
router.afterEach((to, from, next) => {
next((vm)=>{vm.$root.loading = false;});
})
I try a redirect after a post request is made, and I tried different things but nothing worked till now.
self.$router.push('/record')
Vue.$router.push('/record')
this.$router.push({ name: 'Record' })
Here is the updated code. with axios form component, app.js and main.js
axios.delete('/record/' + this.id)
.then((response) => {
this.$router.push('/record')
});
})
.catch(error => {
//
});
In my app.js
import VueRouter from "vue-router";
import router from "./router";
Vue.use(VueRouter);
new Vue({
router,
render: h => h(App)
}).$mount("#app");
router.js
import Vue from "vue";
import VueRouter from "vue-router";
import Record from './components/AddPerson';
Vue.use(VueRouter);
const routes = [
{
path: "/record",
name: "Record",
component: Record,
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
Do you trying to redirect to the same route?
The Vue cache the components, because this is more fast.
If this is your problem, you must do something like this:
<template>
<v-app>
<router-view :key="$route.fullPath" />
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
axios
.delete(`/record/${this.id}`)
.then(response => {
this.$router.push({
name: 'Record',
query: { x: new Date().toISOString() },
});
})
.catch(error => {
//
});
So I have a simple router file, that imports different routes for different parts of my website, so:
general.js (one of my route files)
import Home from '../../components/home/home'
const routes = [{
name: 'home',
path: '/',
component: Home
}]
export default routes
router.js
import Vue from 'vue'
import Router from 'vue-router'
import GeneralRoutes from './general'
Vue.use(Router)
const routes = Array.prototype.concat(
GeneralRoutes
)
const router = new Router({
mode: 'history',
routes
})
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
next({replace: true, name: 'login'})
}
next()
})
export default router
That is my router, now in my app.js, I simply use it like so:
import Vue from 'vue'
import Router from './core/routes/router'
new Vue({
el: '#app',
data: () => ({
user: ''
}),
Router,
});
But this is throwing an error saying the following:
[Vue warn]: Error in render: "TypeError: Cannot read property
'matched' of undefined"
When I console.log the router, I get the following:
router is lowercase
import Vue from 'vue'
import Router from './core/routes/router'
new Vue({
el: '#app',
data: () => ({
user: ''
}),
router: Router
});
How do we get access to the Vue router instance from within our actions.ts file? this.$router and this.$route aren't available in the following context:
boot.ts:
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
import store from './services/store'
import * as log from 'loglevel'
Vue.use(VueRouter);
log.setLevel("trace");
const router = new VueRouter({
routes,
linkActiveClass: "active"
});
new Vue({
el: '#app-root',
router: router,
store: store,
render: h => h(require('./layouts/app.vue.html'))
});
actions.ts:
import { http, httpClass } from './http';
import { DomainAppModel } from '../models/domainApps';
import Vue from 'vue';
var actions = {
LOGOUT: function ({ commit }, params) {
return new Promise((resolve, reject) => {
http.logout().then(result => {
commit('CLEAR_STATE');
// this.$router and this.$route not available
this.$router.push({
path:"login",
query: {
sessionTimedout: true,
redirect: this.$route.fullPath
}
});
});
});
}
}
export default actions
$router:
In order to access $router in the store actions you can do it like this:
move your router declaration to a separate file named router.ts
const router = new VueRouter({
routes,
linkActiveClass: "active"
});
export default router;
Import your router in actions.ts and use it instead of this.$router like this:
import router from './router';
// then use the router like this
router.push({path: 'login'})
$route.fullPath
Concerning $route.fullPath, you can pass it as a property of the payload when the action is dispatched
this.$store.dispatch('LOGOUT', {redirectPath: this.$route.fullPath})
then use it like this in the LOGOUT action
router.push({path:"login", query: {
sessionTimedout: true,
redirect: params.redirectPath
}});