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

Question

我想在用户导航到根路径时默认转到特定页面即当使用时转到 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 才能到达正确的页面。

有什么想法吗？

Answer 1

试试这个代码：

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

Answer 2

使用子项时删除父项的 url 前缀

例如：将 "/defaultview" 更改为 defaultview 删除父路径组件，因此实际代码应该是这样的

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

引用Nested Routes

Answer 3

您可以使用 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;

Answer 4

这种方式适合我

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

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

vue-router redirect to default path issue

vue.js

vue-router

vuejs2