vue中路由嵌套的作用

来源：cnblogs　　作者：java小新人　　时间：2020/12/28 9:51:08　　对本文有异议

vue中为什么要有路由嵌套啊，一般的路由不就行了吗？我们可以看一个很简单的例子，页面效果是这样的：

html文件：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
 
<body>
  <div id="app">
    <router-link to="/user">父组件1</router-link>
    <router-link to="/register">父组件2</router-link>
    <router-view></router-view>
  </div>
 
  <script>
    // 父组件1
    let user = {
      template: `<h1>user</h1>`
    }
    // 父组件2
    let register = {
      template: `
                <div>
                  <router-link to="/register/tab1">tab1</router-link>
                  <router-link to="/register/tab2">tab2</router-link>
                  <router-view></router-view>
              </div>    
      `
    }
    // 子组件1
    let tab1 = {
      template: `<h1>tab1</h1>`
    }
    //子组件2 
    let tab2 = {
      template: `<h1>tab2</h1>`
    }
    // 路由实例
    let router = new VueRouter({
      routes: [
        { path: "/user", component: user },
        {
          path: "/register", component: register, children: [
            // { path: "/register/tab1", component: tab1 },
            // { path: "/register/tab2", component: tab2 },
          ]
        },
        { path: "/register/tab1", component: tab1 },
        { path: "/register/tab2", component: tab2 },
      ]
    })
    // vue实例
    new Vue({
      el: '#app',
      data: {
        message: '页面加载于 ' + new Date().toLocaleString()
      },
      router
    })
  </script>
 
 
</body>
 
</html>