vue-router 路由嵌套

 

App.vue

<template>
  <div id="nav">
    <!-- 导航 -->
    <router-link to="/" active-class="current" replace>Home</router-link> |
    <router-link to="/about" active-class="current" replace>About</router-link> |
    <router-link to="/test1_bak">Test1_bak</router-link> |
    <router-link to="/test1">Test1</router-link> |
    <router-link to="/test2">Test2</router-link> |
    <router-link :to="'/test3/'+test3_id">Test3</router-link> |
    <router-link to="/test4">Test4</router-link>
  </div>
  <!-- 路由出口 -->
  <router-view/>
</template>
<script>
import {ref} from "vue";

export default {
  setup(){
    const test3_id = ref('001')

    return{
      test3_id
    }
  }

}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 10px;
  background-color: lightskyblue;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

/* 默认选中样式类 */
#nav a.router-link-exact-active {
  color:orangered;
}

.current{
  font-size: 24px;
  font-weight: bolder;
}


</style>

 

Test4.vue

<template>
  <div id="test4_body">
    <div id="header"><h1>上标题</h1></div>
    <div id="body">
      <div id="navl">
        左导航
        <div>
          Test4
          <div>
            <router-link :to="{path:'/test4/test4-1'}">Test4_1</router-link>
            <br/>
            <router-link :to="{path:'/test4/test4-2'}">Test4_2</router-link>
          </div>
        </div>
      </div>
      <div id="main">
        中内容
        <router-view></router-view>
      </div>
      <div id="navr">右导航</div>
    </div>
    <div id="footer"><p>下版权</p></div>
  </div>
</template>
<script>

export default {
  name: 'Test4',
  setup(){

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* CSS Document */
/**{*/
/*  margin:0;*/
/*  padding:0;*/
/*}*/
/*body{*/
/*  margin:10px;*/
/*}*/
#test4_body{
  margin:0;
  padding:0;
  /*margin:10px;*/
  /*width:600px;*/
  /*height: 100%;*/
  /*margin:0 auto;*/
  /*height:400px;*/
  height:auto;
  min-height:500px;
  /*width:800px;*/
  background:#bbeeeb;
  margin:0 auto;
}

#header{
  border:1px solid black;
  /*width:600px;*/
  height:60px;
  margin:0 auto;
  margin-bottom:10px;
}
#header h1{
  height:60px;
  line-height:60px;
  font-size:16px;
  text-align:center;
}
#body{
  /*width:600px;*/
  margin:0 auto;
}
#navl{
  border:1px solid black;
  width:150px;
  height:auto;
  float:left;
  margin-bottom:10px;
  background:lightcyan;
  overflow: auto;
}
#main{
  border:1px solid black;
  /*width:294px;!*边框也算一个像素*!*/
  width: auto;
  min-width: 300px;
  height:auto;
  float:left;
  margin-bottom:10px;
  background:lightblue;
}
#navr{
  border:1px solid black;
  /*width:150px;*/
  /*height:500px;*/
  float:right;
  margin-bottom:10px;
  background:lightyellow;
}
#footer{
  border:1px solid black;
  /*width:600px;*/
  height:60px;
  line-height:60px;
  margin:0 auto;
  text-align:center;
  clear:both;
}
</style>

 

Test4-1.vue

<template>
  <div id="test4-1">
    Test4-1
  </div>
</template>

<script>
export default {
  name: 'Test4-1',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#test3_news{
  width: 450px;
  height: 600px;
  background-color: skyblue;
}
</style>

 

Test4-2.vue

<template>
  <div id="test4-2">
    Test4-2
  </div>
</template>

<script>
export default {
  name: 'Test4-2',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#test3_news{
  width: 450px;
  height: 600px;
  background-color: skyblue;
}
</style>

 

index.js

//引入
import { createRouter, createWebHashHistory } from 'vue-router'
// import Home from '../views/Home.vue'
// import Test3 from '../views/Test3.vue'

//路由懒加载
const Home = () => import('../views/Home.vue');
const Test3 = () => import('../views/Test3.vue');
const Test4 = () => import('../views/Test4.vue');
const Test4_1 = () =>  import("../components/Test4-1");
const Test4_2 = () =>  import("../components/Test4-2");

//创建路由对象
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
    //路由重定向
  {
    path: '/home',
    redirect:'/'
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/test1_bak',
    name: 'Test1_bak',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Test1_bak.vue')
  },
  {
    path: '/test1',
    name: 'Test1',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Test1.vue')
  },
  {
    path: '/test2',
    name: 'Test2',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Test2.vue')
  },
  {
    path: '/test3/:id',
    name: 'Test3',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Test3
  },
  {
    path: '/test4',
    redirect: '/test4/test4-1',
    name: 'Test4',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Test4,
    children:[
      {path:'test4-1',component:Test4_1},
      {path:'test4-2',component:Test4_2}
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  linkActiveClass:'current',
  routes
})

//导出路由对象
export default router