vue中router-view 嵌套详细页

源码资源网 · 发表于 2024-6-7 17:50:56

在Vue中，使用<router-view>进行嵌套时，可以创建一个布局，其中包括顶部或侧边栏内容，以及一个主要内容区域，用于显示详细页面。以下是一个简单的例子：

定义路由配置，使用children属性实现嵌套：

const routes = [
{
path: '/',
name: 'Home',
component: Home,
children: [
{
path: 'details/:id', // 动态路径参数
name: 'Details',
component: Details
}
]
}
];

复制代码

在Home组件中使用<router-view>作为详细页面的容器：

<template>
<div class="home">
<sidebar></sidebar>
<nav-bar></nav-bar>
<router-view></router-view>
</div>
</template>
<script>
import Sidebar from '@/components/Sidebar.vue';
import NavBar from '@/components/NavBar.vue';
export default {
components: {
Sidebar,
NavBar
}
};
</script>

复制代码

在Details组件中，编写具体的详细页面内容：

<template>
<div class="details">
<div>这里是详细页面的内容</div>
</div>
</template>
<script>
export default {
// 通过路由传入的参数
props: ['id']
};
</script>

复制代码

当用户访问/details/123时，Home组件将显示，并且其中的<router-view>会被Details组件替换，展示具体的内容。

router-view默认显示一个页面（亲测可行）

在上面的代码示例中，<router-view> 标签默认会显示与当前路径匹配的组件。当 Vue Router 解析 URL 并找到匹配的路由时，它会将相应的组件渲染到 <router-view> 中。

如果你希望 <router-view> 在没有具体路径匹配时显示一个默认的页面（比如一个主页或者一个 404 页面），你可以在路由配置中添加一个通配符路由（catch-all route）。通配符路由通常放在路由配置数组的最后，以确保它只有在其他所有路由都不匹配时才被使用。

下面是一个添加默认页面的路由配置示例：

const routes = [
{
path: '/',
name: 'Home',
component: Home,
children: [
{
path: 'details/:id',
name: 'Details',
component: Details
},
// 添加一个通配符路由作为默认页面
{
path: '*',
component: NotFound // NotFound 是你的 404 页面组件
}
]
}
];

复制代码

在上面的代码中，path: '*' 是一个通配符路径，它会匹配任何没有被其他路由捕获的路径。当这样的路径被访问时，NotFound 组件会被渲染到 <router-view> 中。

需要注意的是，NotFound 组件应该是一个普通的 Vue 组件，而不是嵌套路由的一部分。通常，你会把它定义为一个独立的组件，然后在路由配置中直接引用它。

确保你的 NotFound 组件已经定义并导入，就像其他组件一样：

import NotFound from '@/components/NotFound.vue';

复制代码

然后，在路由配置中引用它：

{
path: '*',
component: NotFound
}

复制代码

最后，不要忘记在 Vue 应用中安装并使用 Vue Router：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
routes // 使用上面定义的路由配置
});
new Vue({
router,
render: h => h(App)
}).$mount('#app');

复制代码

这样，当用户访问一个不存在的路径时，<router-view> 将默认显示 NotFound 组件的内容。

另外一种让router-view默认显示页面的方法：

Vue关于如何让router-view默认显示页面问题_依星源码资源网,依星资源网 - (net188.com)

		自动登录	找回密码
密码			立即注册

vue中router-view 嵌套 详细页

相关帖子

vue中router-view 嵌套详细页