web-dev-qa-db-fra.com

vue-router redirige vers le problème de chemin par défaut

Je souhaite accéder par défaut à une page spécifique lorsque l'utilisateur accède au chemin racine, c'est-à-dire lorsqu'il est utilisé, va sur myapp.com Je souhaite les rediriger vers myapp.com/defaultpage

Mon code actuel est

index.js

import Full from '../containers/Full'
import DefaultView from '../views/DefaultView'

export default new Router({
  mode: 'history',
  linkActiveClass: 'open active',
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: '/',
      redirect: '/defaultview',
      name: 'home',
      component: Full,
      children: [
        {
          path: '/defaultview',
          name: 'defaultview',
          component: DefaultView
        },
        {
          path: '*',
          component: NotFoundComponent
        }
    }
]})

Comme c'est le cas lorsque l'utilisateur accède à myapp.com, j'obtiens une "page 404 introuvable", c'est-à-dire le NotFoundComponent. Ce n'est que lorsque je tape myapp.com/defaultview que je peux accéder à la bonne page.

Des idées?

vue.jsvuejs2vue-router
14
proximacentauri

Lorsque vous utilisez des enfants, supprimez le préfixe d'URL du parent

échange "/defaultview" à defaultview supprime le composant du chemin parent, donc le code réel devrait être comme ceci

routes: [
{
  path: '/',
  redirect: '/defaultview',
  name: 'home',
  component: Full,
  children: [
    {
      path: 'defaultview', /* changed */
      name: 'defaultview',
      component: DefaultView
    },
    {
      path: '*',
      component: NotFoundComponent
    }
  ]
}

référence Routes imbriquées

5
Raj

Essayez ce code:

routes: [
    {
      path: '/',
      redirect: '/defaultview'
    },
    {
      path: '/defaultview',
      name: 'defaultview',
      component: DefaultView
    },
    {
      path: '*',
      component: NotFoundComponent
    }
]
22
Adriano Resende

Vous pouvez le faire en utilisant 1 ligne de code, c'est-à-dire en ajoutant router.replace("myPath");. Code complet:

import Vue from "vue";
import Router from "vue-router";
import MyComponent from "./my-component";

Vue.use(Router);

const routes = [
  { path: "/myPath", name: "myPath", component: MyComponent }
];

const router = new Router({
  mode: "history", // Remove the hash from the URL, optional.
  routes
});

router.replace("myPath");

export default router;
0
Daniel Danielecki