vue嵌套路由(默认显示第一个children路由)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。[[点击跳转到网站。]]

App根组件中必须加router-view

router文件中

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/home/Home.vue";
import Detail from "../views/home/detail.vue";
import Detail1 from "../views/home/detail1.vue";
Vue.use(VueRouter);

const routes = [
  {
    
    
    path: "/",
    name: "Home",
    component: Home,
    //重定向默认显示第一个children路由
    redirect:"/detail",
    children:[
        {
    
    
          path:"detail",
          component:Detail
        },
        {
    
    
          path:"detail1",
          component:Detail1
        },
    ]
  },
];

const router = new VueRouter({
    
    
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

Home文件中

<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div>
    <h1>我是一级</h1>
    <router-link to="/detail">前往二级路由1</router-link>
    <router-link to="/detail1">前往二级路由2</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      msg: "我是一个home组件",
    };
  },
};
</script>

三级嵌套以此类推…

猜你喜欢

转载自blog.csdn.net/qq_47272950/article/details/124293941