vue中router-view 嵌套 详细页

源码资源网

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

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

1. const routes = [
   
2.   {
   
3.     path: '/',
   
4.     name: 'Home',
   
5.     component: Home,
   
6.     children: [
   
7.       {
   
8.         path: 'details/:id', // 动态路径参数
   
9.         name: 'Details',
   
10.         component: Details
    
11.       }
    
12.     ]
    
13.   }
    
14. ];

复制代码

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

1. <template>
   
2.   <div class="home">
   
3.     <!-- 侧边栏或顶部内容 -->
   
4.     <sidebar></sidebar>
   
5.     <nav-bar></nav-bar>
   
6. 
   
7.     <!-- 主内容区域 -->
   
8.     <router-view></router-view>
   
9.   </div>
   
10. </template>
    
11. 
    
12. <script>
    
13. import Sidebar from '@/components/Sidebar.vue';
    
14. import NavBar from '@/components/NavBar.vue';
    
15. 
    
16. export default {
    
17.   components: {
    
18.     Sidebar,
    
19.     NavBar
    
20.   }
    
21. };
    
22. </script>

复制代码

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

1. <template>
   
2.   <div class="details">
   
3.     <!-- 详细内容 -->
   
4.     <div>这里是详细页面的内容</div>
   
5.   </div>
   
6. </template>
   
7. 
   
8. <script>
   
9. export default {
   
10.   // 通过路由传入的参数
    
11.   props: ['id']
    
12. };
    
13. </script>

复制代码

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


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


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

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

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

1. const routes = [
   
2.   {
   
3.     path: '/',
   
4.     name: 'Home',
   
5.     component: Home,
   
6.     children: [
   
7.       {
   
8.         path: 'details/:id',
   
9.         name: 'Details',
   
10.         component: Details
    
11.       },
    
12.       // 添加一个通配符路由作为默认页面
    
13.       {
    
14.         path: '*',
    
15.         component: NotFound // NotFound 是你的 404 页面组件
    
16.       }
    
17.     ]
    
18.   }
    
19. ];

复制代码

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

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

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

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

复制代码

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

1. {
   
2.   path: '*',
   
3.   component: NotFound
   
4. }

复制代码

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

1. import Vue from 'vue';
   
2. import VueRouter from 'vue-router';
   
3. 
   
4. Vue.use(VueRouter);
   
5. 
   
6. const router = new VueRouter({
   
7.   routes // 使用上面定义的路由配置
   
8. });
   
9. 
   
10. new Vue({
    
11.   router,
    
12.   render: h => h(App)
    
13. }).$mount('#app');

复制代码

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



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

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