一、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 {
// 不需要身份验证的逻辑...
}
原文地址:https://blog.csdn.net/weixin_45532665/article/details/134784530
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_44324.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
