vue3 vue-router 404 重定向 别名 嵌套路由 命名视图 元信息 （三）

文章目录

• [一、404 Not found 路由](#一、404 Not found 路由)
• 二、重定向
• 三、别名
• 四、嵌套路由
• 五、命名视图
• 六、路由元信息

一、404 Not found 路由

当用户输入任何未知的路径时，Vue Router都将显示我们定义的404页面。这种方式使得我们能够更好地控制用户访问未知路径时的行为，提供更友好和统一的用户体验

// 添加通配符路由
  { path: '/:catchAll(.*)', component: () => import("@/views/notFound/index.vue"), }

二、重定向

通过重定向，可以将一个路径重定向到另一个指定的路径

 {
    path: "/home",
    name: "home",
    component: () => import("@/views/home/index.vue"),
  },
  {
    path: "/login",
    redirect: { path: "/home" },
  },

三、别名

可以使用别名来为路由配置添加额外的路径。这在某些情况下非常有用，比如需要将旧的路径重定向到新的路径，同时保留旧路径仍然可以访问

{
    path: "/home",
    name: "home",
    alias: "/index",
    component: () => import("@/views/home/index.vue"),
  },

四、嵌套路由

可以使用Vue Router来配置嵌套路由，创建具有层次结构的路由布局

{
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }

当用户访问/parent时，ParentComponent会渲染，并且ChildComponent会出现在<router-view>中。

五、命名视图

同一个路由中同时渲染多个组件。这对于需要在同一页面上显示多个组件的情况非常有用

<router-view name="sidebar"></router-view>
<router-view ></router-view>

 {
    path: '/',
    components: {
      default: ComponentA,
      sidebar: ComponentB
    }
  }

在上面的示例中，我们为根路径/的路由配置中定义了两个组件：ComponentA 和 ComponentB，分别被命名为 default 和 sidebar。这意味着 ComponentA 将会被渲染到默认的 <router-view> 中，而 ComponentB 将会被渲染到名为 sidebar 的 <router-view> 中。

六、路由元信息

可以使用路由元信息（Route Meta Fields）来为路由添加自定义数据或标记。这些元信息可以帮助我们在导航守卫、组件钩子或其他地方访问到特定路由的相关信息

设置路由元信息

{
    path: "/home",
    name: "home",
    alias: "/index",
    component: () => import("@/views/home/index.vue"),
    meta: { requiresAuth: true },
    children: [
      {
        path: "child",
        component: () => import("@/views/child/index.vue"),
      },
    ],
  },
  {
    path: "/about/:id",
    name: "about",
    meta: { requiresAuth: false },
    component: () => import("@/views/about/index.vue"),
  },

访问路由元信息

// 在导航守卫中访问路由元信息
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 需要身份验证的逻辑...
  } else {
    // 不需要身份验证的逻辑...
  }
})

if (route.meta.requiresAuth) {
  // 需要身份验证的逻辑...
} else {
  // 不需要身份验证的逻辑...
}