vue-router 重定向到默认路径问题答案

【问题标题】：vue-router redirect to default path issuevue-router 重定向到默认路径问题
【发布时间】：2017-10-19 00:21:59
【问题描述】：

当用户导航到根路径时，我想默认到特定页面即当使用时转到 myapp.com 我想将它们重定向到 myapp.com/defaultpage

我当前的代码是

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
        }
    }
]})

当用户访问 myapp.com 时，我得到一个“未找到 404 页面” - 即 NotFoundComponent。只有当我输入 myapp.com/defaultview 时，我才能到达正确的页面。

有什么想法吗？

【问题讨论】：

在儿童中删除 /
我试过了，还是一样的 404，我也试过从根目录中删除 / 即重定向：'defaultview'。也是 404。我可以访问我的页面的唯一方法是通过 myapp.com/defaultview

标签： vue.js vuejs2 vue-router

【解决方案1】：

这种方式适合我

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Home from '../components/home/container';
import LiveAgent from '../components/live_agent/container';
import Bot from '../components/bot/container';
import User from '../components/user/container';

const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        component: Home,
        name: 'home',
        path: '/home'
    },
    {
        component: LiveAgent,
        name: 'live_agent',
        path: '/live_agent'
    },
    {
        component: Bot,
        name: 'bot',
        path: '/bot'
    },
    {
        component: User,
        name: 'user',
        path: '/user'
    }
];

export default new VueRouter({
    routes // short for routes: routes
})

【讨论】：

【解决方案2】：

您可以使用 1 行代码来完成，即添加 router.replace("myPath");。完整代码：

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;

【讨论】：

【解决方案3】：

当使用子级时删除父级的url前缀

例如：将"/defaultview"改为defaultview去掉父路径组件，所以实际代码应该是这样的

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

参考Nested Routes

【讨论】：

【解决方案4】：

试试这个代码：

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

【讨论】：

谢谢，但是我需要保留根路径的完整组件，因为它是所有其他组件的基础。如果我添加它，那么基本上与我上面的相同.
一种有效但不适用于我需要重定向到的多个页面的技巧是：{ path: '*', component: DefaultView }
非常有用的信息。谢谢你的分享。我想知道你是否体验过 Nuxt.js 并用它做过同样的事情？过去我问过同样的问题，但使用 Nuxt.js，当几周没有人回答我时，我删除了我的问题。
@BillalBegueradj 使用 Nuxt.js，您需要模块为 router-module (github.com/nuxt-community/router-module)