Develop Reference

VueJS i18n Routes 404 Page

The Idea
Let me first tell you the idea, user enter "domain.com" user will get redirected to "domain.com/en" where is set by default to the english language, after that user can navigate throughout the website for example to "domain.com/en/about-us/".
My Issue
I can't figure out how to set up the routing for the "domain.com/wrong-page" where is also the global i18n parameter that i'm waiting for or "domain.com/wrong-language/corect-page" so the user can get the appropriate 404 page that i want.
My Set Up
Router file
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import i18n from '../i18n'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: `/${i18n.locale}`
},
{
path: '/:lang',
component: {
render(c) { return c('router-view') }
},
children: [
{
path: '',
name: 'Home',
component: Home
},
{
path: 'about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/*',
name: '404',
component: () => import(/* webpackChunkName: "404" */ '../components/404.vue')
}
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
Main.js file
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './i18n'
import LanguageSwitcher from "#/components/LanguageSwitcher.vue";
import NavigationTopMenu from "./components/NavigationTopMenu.vue";
import Footer from "./components/Footer.vue";
Vue.component('language-switcher', LanguageSwitcher)
Vue.component('navigation-top-menu', NavigationTopMenu)
Vue.component('footer-g', Footer)
Vue.config.productionTip = false
// use beforeEach route guard to set the language
router.beforeEach((to, from, next) => {
// use the language from the routing param or default language
let language = to.params.lang;
if (!language) {
language = 'en'
}
// set the current language for i18n.
i18n.locale = language
next()
})
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')

So, another developer reached out to me, the answer was pretty straight forward we can implement a custom regex for the lang to limit what can be matched with.
:lang
needs to be
:lang(en|fr|es)
another solution is to configure the navigation guard further and redirect to the following error page.

Npm run generate not generating routes

I am using vue-router in a nuxt project and when i run npm run generate it generates everything except my pages. I think it has got something to do with the router because before using vue router i had no problems with generating the pages Here is my router:
router.js
import Vue from 'vue'
import Router from "vue-router"
import Home from '../debonkelaer/pages/index.vue'
import actueel from '../debonkelaer/pages/actueel.vue'
import impressies from '../debonkelaer/pages/impressies.vue'
import reglement from '../debonkelaer/pages/reglement.vue'
import reserveren from '../debonkelaer/pages/reserveren.vue'
import tarieven from '../debonkelaer/pages/Tarieven.vue'
import ingelogd from '../debonkelaer/pages/ingelogd.vue'
import firebase from 'firebase/app'
import 'firebase/auth'
Vue.use(Router);
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/actueel',
name: 'Actueel',
component: actueel
},
{
path: '/impressies',
name: 'Impressies',
component: impressies
},
{
path: '/reserveren',
name: 'Reserveren',
component: reserveren
},
{
path: '/tarieven',
name: 'Tarieven',
component: tarieven
},
{
path: '/reglement',
name: 'Reglement',
component: reglement
},
{
path: '/ingelogd',
name: 'Ingelogd',
component: ingelogd,
}
]
const router = new Router({
mode: 'history',
base: '/',
routes
})
export function createRouter() {
return router
};```
If you need any additional code please reply.

When you're working with nuxt.js all routes are automatically generating from all your files in your pagesdirectory. That means you don't need to manually declare every route!
Be sure to check out the official documentation for nuxt.js: Automatic Routing
To check for auth you should use middleware.
If you only need it for one specific route/component, you can use something like the following code in your component's exported function
middleware({ redirect }) {
// If the user is not authenticated
const authenticated = YOUR_AUTH
if (!authenticated) {
return redirect('/login')
}
}

Vue.js: addRoutes method with array from API call

I am going to use the addRoutes method for the first time. I didn't find any full tutorials of how developers can use this method so I decided to try and ask here.
In my app I have some sort of CMS so a user can create new pages with custom paths. In my router/index.js file where I import components and declare their routes I need to add these custom routes.
I have an API endpoint which can give me a JSON with arrays of these routes. How can I call this endpoint in my router/index.js file and add these new routes to my router?
Here is what I have in my router.index.js file (I added its structure rather than code itself):
import Vue from 'vue';
import VueRouter from 'vue-router';
import http from '../http';
import config from '../config';
import Home from '../components/pages/Home';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home,
},
...
],
});
router.addRoutes([]);
export default router;

You can use addRoutes in this way:
import router from '#/router'
import Project from './pages/Project'
import Projects from './pages/Projects'
router.addRoutes([{
path: '/projects',
name: 'projects.projects',
component: Projects,
props: false
}, {
path: '/projects/:id',
name: 'projects.project',
component: Project,
props: true
}])
From docs:
Dynamically add more routes to the router. The argument must be an Array using the same route config format with the routes constructor option
Full example:
You have the main router like this:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/pages/Home';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home,
},
],
});
export default router;
Now, you create a new page with the following structure.
-- NewPage
-- NewPage.vue
-- route.js
The route.js should look like this:
import router from '#/router' //importing the main router
import NewPage from './NewPage.vue'
router.addRoutes([
{
path: '/new-page',
name: 'newPage',
component: NewPage,
},
])
Hope I helped you.

Trouble getting data from root Vue instance with vue-router

I load all of my data in the root Vue instance and im trying to access them in my router.
How can I access the data in my root instance within my router? All the this.a.app or this.app answers i found online weren’t the solution.
Router.js:
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/login'
import Container from '../components/container'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [{
path: '/login',
name: 'Login',
component: Login,
props: { test: **<data from my Vue root instance>** }
},
{
path: '/products',
name: 'Container',
component: Container,
children: [{
path: 'flavor',
component: Login
},
{
path: 'storage',
component: Login
},
{
path: 'network',
component: Login
}
]
}
]
})
Main.js:
import router from './router’
var vm = new Vue({
el: ‘#app’,
router,
template: ‘’,
components: {
App
},
data() {
return {
modal: ‘’

I would avoid sharing the data using the router instance.
I personally like to have a store file, which contains data I want to share between my components.
export default {
state: {
counter: 0
}
}
And in your component you can import the file:
import store from '../store'
export default {
data () {
return {
sharedState: store.state
}
}
}
Changes to sharedState will also be passed to other components.
Source: https://skyronic.com/2016/01/03/vuex-basics-tutorial / Solution 2

Vuejs lazy loading routes in webpack template

I have created vuejs project with vue-cli tools and webpack template.
vue init webpack my-project
I don't know how to implement lazy loading on routes with templates
currently i have two routes in router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import Test from '#/components/Test'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'test',
component: Test
}
]
})
And its imported in main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
But it doesn't contain the lazy loading implementation how can i do it??

instead of using
import Test from '#/components/Test'
use as
const Test = () => import('#/components/Test');
lazy loading Documentataion

Nice way to do this:
function load (component) {
return () => import(`#/${component}.vue`)
}
...
routes: [
{ path: '/', component: load('Hello') },