How can I use router.js file to define route for few or more languages dynamic as it does nuxt-i18n (https://nuxt-community.github.io/nuxt-i18n/routing.html)?

I have two pages which can be routed to from the home page using <nuxt-link>.. This is working as exptected.

If I land directly on the the non-home page the <nuxt-link> fails.
The URL bar changes correctly to the home page address, but the page is not navigated to.
If I reload the page using the URL that has been placed there by <nuxt-link>, by focussing the URL bar and typing enter, the home page loads as expected.

How can <nuxt-link> place the correct path in the URL bar, but not navigate to it ?

hello, my component this refresh when I change the url !
But I do not have this problem without nuxt !
An idea ? thx 😇
{ path: '/komit', name: 'main_komit', component: main_komit }, { path: '/create/komit', name: 'create_komit', component: main_komit },

Ah, with some more exploration, I've figured it out!

I needed to import them, with a webpack chunk name. Which was handled by the original nuxt router.js

By simply changing my imports, chunking seems to be returned. 👍

Originally, I was trying to import like so

import Homepage from '~/pages/Homepage.vue';

Instead, this will import the Homepage component, and chunk it as pages/Homepage

const Homepage = () => import('~/pages/Homepage.vue' /* webpackChunkName: 'pages/Homepage' */).then(m => m.default || m);

I assume there is an undocumented portion of implementing router-module that I'm missing, to restore proper chunking functionality to my app.

When we use nuxt's magic routing, we're given all our pages as individual chunks.

When building the same page structure using router-module, I'm only seeing vendor/common chunking, while all pages are bundled up into main.js

--

Is there some config in router-module I'm missing? Is this a bug, I should make a formal report for?

I assume I need to extend webpack, and include my own list of routes to chunk…

Likely implementing the nuxt router.js in a similar way myself… right?

@javialon26 Sorry I forgot something, try with:

import Router from 'vue-router'

// import HomePage from '@/components/pages/index.vue'

const HomePage = () => import('@/components/pages/index.vue').then(m => m.default || m)
const HelpPage = () => import('@/components/pages/ayuda.vue').then(m => m.default || m)

Vue.use(Router)

export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'home',
        component: HomePage
      },
      {
        path: '/ayuda',
        name: 'ayuda',
        component: HelpPage
      }
    ]
  })
}

When you install router-module or router configured as manual, yarn build does not generate for each page.

I need to generate for each page due of server Tomcat.
With server tomcat, when I refresh page outside index.html, I get error 404 because it does not match URI.

What is solution for load page outside index.html in production?

How can i extends de main routes inside a custom nuxt module?

i've tried to do:

app.router.addRoutes(routes)

function but it only adds the route to the client side

when refresh the route disappears

can anyone help?

I checked the tutorial from Nuxt officical page and write a nested route similar to the sample. However while i'm using external js in local setting form(https://nuxtjs.org/faq),it seems not loading external js in local setting through this.$router.push({path:***}) or this.$router.push(name:childviewName).

But the url has directed to the page. And the exrernal sources written in local setting form can be loaded after directly refreshing the page. Though writting external sources in Global Settings can work(I've tested) ,but i guess that's not a good way to solve this problem.

Is it possible to use vue-router's aliasing in Nuxt with router-module? If not, is there another way to alias routes?

What I expect to happen

I expect that my pre loader configuration will lint this file.

That's how I configure it:

        // Enabling eslint in nuxt.config.js:
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })

What actually happens

router.js is just ignored from linting.
You can write any styles you want, nothing will happen.

It only happens with the file. Other files are linted as usual.

Steps to reproduce

1. Install https://github.com/wemake-services/wemake-vue-template
2. Mess up something inside router.js for example: mode:'history', (no spaces)
3. Run yarn dev

There will be no error. But there should be one.

Comments

I guess it happens because webpack does not actually require() this file during the client build.
Related: https://github.com/wemake-services/wemake-vue-template/issues/587

PS

I have tried to submit a bug via cmty twice! At the first try it just removed everything I had and showed me this message (I was unable to select any version):

Then it just went offline (but I have already copied my issue text this time!):

Is there any possibility to add custom data to generated routes, besides extendRoutes?

I want to auto-generate nav menu in my Nuxt application, and i need to set a title to each route.

Based on LinusBorg's answer here it would be good to have the option to specify another <nuxt /> tag inside the index.vue page for the corresponding route. For example, if my routes look like this:

- somepage.vue
- items/
  - _slug.vue
  - index.vue (the one with <nuxt /> tag)

It would be nice to just append that content into items/index.vue instead of swapping all the content from _slug.vue with index.vue.
Is this already possible? If yes, what was I missing?

This would prove super useful for galleries for example, or any kind of modal content/content that would need to show the parent routes content in the background.

how get router instance on a middleware?

Hi there. Thank you for your module.
I am trying to use it in my project instead pages mechanism. Everything are going fine except lazy-loading (eg. code splitting)

I tried to use this configuration, like in Vue-router docs but it doesn't work somehow

```import Vue from "vue"
import Router from "vue-router"

import Main from "~/components/Main"

const Customer = () => import("~/components/customer/index.vue");

// import Customer from "~/components/customer";
import Overview from "~/components/customer/overview";
import Profile from "~/components/customer/profile";
import Cards from "~/components/customer/cards";

Vue.use(Router);

export function createRouter() {
return new Router({
mode: "history",
routes: [
{
path: "/",
component: Main
},
{
path: "/customer",
component: Customer,
children: [
{
path : "",
component : Overview
},
{
path : "profile",
component : Profile
},
{
path : "cards",
component : Cards
}
]
}
]
})
}

When I tried to load the Customer module I got this issue
`Failed to mount component: template or render function not defined.`

My component is deadly simple

<template> <router-view></router-view> </template>

```

could you, please, help me with this issue? May be I'm doing something wrong.

ERROR Nuxt error
Error: [nuxt-router-module] Please create a router.js file in your source folder.

Generating an SPA with a router base set will automatically add a <base href=""> so the application can be loaded in a subdirectoy.

Can this be accomplished when using the router-module or will i need to set the base-href and rewrite all script tags myself?