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

Posted 2023-02-22

【中文标题】vue-router 重定向到默认路径问题

【英文标题】：vue-router redirect to default path issue

【发布时间】：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

【参考方案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)