路由嵌套

路由嵌套

router index.js

import VueRouter from "vue-router"
import Vue from "vue"


const Home = ()=> import ("@/components/Home")
const About = ()=> import ("@/components/About")
const Btn1Component = ()=> import ("@/components/Btn1Component")
const Btn2Component = ()=> import ("@/components/Btn2Component")
const Dynamic = ()=> import ("@/components/Dynamic")
const Nested = ()=> import ("@/components/Nested")
const Nested1 = ()=> import("@/components/Nested1")
const Nested2 = ()=> import("@/components/Nested2")


/**
 * 安装插件
 */
Vue.use(VueRouter)

/**
 * 创建路由对象
 * @type {*[]}
 */
const routes = [
   {
      path: '/',
      redirect: '/home'
   },
   {
      path: '/home',
      component: Home
   },
   {
      path: '/about',
      component: About
   },
   {
      path: '/btn1Component',
      component: Btn1Component
   },
   {
      path: '/btn2Component',
      component: Btn2Component
   },
   {
      path: '/dynamic/:params',
      component: Dynamic
   },
   {
      path: '/nested',
      component: Nested,
      children: [
         {
            path: '',
            redirect: 'nested1'
         },
         {
            path: 'nested1',
            component: Nested1
         },
         {
            path: 'nested2',
            component: Nested2
         }
      ]
   }
]

/**
 * 初始化路由 配置
 * @type {VueRouter}
 */
const router = new VueRouter({
   routes,
   mode: 'history',
   linkActiveClass: 'active'
})

/**
 * 导出路由
 */
export default router

Nested.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
name: "Nested"
}
</script>

<style scoped>

</style>

app.vue

<template>
  <div id="app">
    <div style="display: flex;flex-direction: row;height: 100%;width: 100%;">
      <div style="height: 100%;background-color: antiquewhite;flex-grow: 1">
        <ul style="padding: 0px">
          <router-link tag="li" replace to="/home" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">首页</router-link>
          <router-link tag="li" replace to="/about" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">关于</router-link>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="btn1Click">按钮1</button>
          </li>
          <li style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">
            <button @click="btn2Click">按钮2</button>
          </li>
          <router-link tag="li" replace :to="'/dynamic/'+userId" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">动态路由</router-link>
          <router-link tag="li" replace to="/nested" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由</router-link>
          <li>
            <ul>
              <router-link tag="li" replace to="/nested/nested1" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由1</router-link>
              <router-link tag="li" replace to="/nested/nested2" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">嵌套路由2</router-link>
            </ul>
          </li>
        </ul>
      </div>
      <div style="height: 100%;background-color: aqua;flex-grow:6;display: flex;flex-direction: column">
        <div style="background-color: azure;flex-grow: 1">
          我是面包屑
        </div>
        <div style="background-color: cornsilk;flex-grow: 15">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      userId:"Icez"
    }
  },
  components: {
  },
  methods: {
    btn1Click(){
      //退入栈中component
      // this.$router.push('/btn1Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn1Component')
    },
    btn2Click(){
      //退入栈中component
      // this.$router.push('/btn2Component')
      //替换当前栈中的后进来的component
      this.$router.replace('/btn2Component')
    }
  }
}
</script>

<style>
#app,body,html{
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
.active{
  color: red;
}
</style>

效果