Vue——路由嵌套（主子路由）

什么是嵌套路由，为什么需要它。比如，当应用有多个层级的结构时，比如主页下有子菜单，这时候就需要嵌套路由。可能需要举一个例子，比如用户中心页面下的不同子页面，如个人资料、订单等。

一、嵌套路由核心概念
作用：实现多层级的路由结构（如：主页 > 用户中心 > 个人资料）

1.1 文件结构示例

src/
├── router/
│   └── index.js         # 路由配置文件
├── views/
│   ├── goods.vue   # 父路由组件
│   └── item.vue      #  商品子路由组件
│   └── detail.vue    # 详情子路由组件│   
│   └── review.vue    # 评价子路由组件│  

二、配置步骤
2.1 定义父路由组件
在UserCenter.vue中预留子路由出口

<!-- views/goods.vue -->
<template>
  <div>
    <h2>商品</h2>
    <router-view></router-view>
  </div>
</template>

2.2 配置嵌套路由
修改路由配置文件router/index.js

//router.js是主路由

import Vue from "vue"; //导入Vue构造函数
import Router from "vue-router"; //导入路由构造函数
Vue.use(Router); //安装路由插件

let router = new Router({
  mode: "hash",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/goods",
      redirect: "/goods/detail",   // 重定向到详情子组件
      alias: "/product", //别名
      name: "goods",
      component: () => import("./pages/goods/index.vue"),
      children: [
        { path: "/goods/item", name: "goods-item", component: () => import("./pages/goods/item.vue") },
        { path: "/goods/detail", name: "goods-detail", component: () => import("./pages/goods/detail.vue") },
        { path: "/goods/review", name: "goods-review", component: () => import("./pages/goods/review.vue") },
      ],
    },

  ],
});
export default router;

定义嵌套子组件

replace：会直接返回父组件

<template>
  <div>
    <div class="nav">
      <div class="item" @click="goPage('/goods/item')">商品</div>
      <div class="item" @click="$router.replace('/goods/detail')">详情</div>
      <div class="item" @click="$router.replace('/goods/review')">评价</div>
    </div>

    <router-view></router-view>
    
    <button type="button" @click="$router.go(-1)">返回</button>
  </div>
</template>

<script>


export default{
    name:"goods",
    methods:{
      goPage(url){this.$router.replace(url)}  //2中事件定义方法都可以
    }

}
</script>

<style scoped>
.nav{width:100%;display:flex}
.nav .item{padding:10px 20px;}
</style>

push会返回上一级的记录

<template>
  <div>
    <div class="nav">
      <div class="item" @click="goPage('/goods/item')">商品</div>
      <div class="item" @click="$router.push('/goods/detail')">详情</div>
      <div class="item" @click="$router.push('/goods/review')">评价</div>
    </div>

    <RouterView></RouterView>
    <button type="button" @click="$router.go(-1)">返回</button>
  </div>
</template>

<script>
import { RouterView } from 'vue-router';


export default{
    name:"goods",
    methods:{
      goPage(url){this.$router.push(url)}
    }

}
</script>

<style scoped>
.nav{width:100%;display:flex}
.nav .item{padding:10px 20px;}
</style>

子组件

4.2 路径重定向
当访问父路由时重定向到默认子路由。