Vue.js多级路由实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Un_YUI/article/details/113634492
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <title>Document</title>
  <style>
    /* 第一层按钮 */
    #app .router-link-active{
      color: rgb(255, 0, 0);
    }
    /* 第二层按钮 */
    #one .router-link-active{
      color: rgb(181, 247, 1);
    }
    /* 第三层按钮 */
    #two .router-link-active{
      color: rgb(2, 174, 241);
    }

    /* router-link-active（前者） 和 router-link-exact-active（后者） 都是系统给的， */
    /* 当该路由的二级路由触发后，父路由标签上只有router-link-active，so 给前者添加样式 */
    /* 如果级别层级多，可以给包裹他们的模板的根标签加上唯一id来识别 */
  </style>
</head>

<body>
  <div id="app">
    <!-- 主路由 -->
    <router-link to="/home" tag="button">home</router-link>
    <router-link to="/news" tag="button">news</router-link>
    <router-link to="/about" tag="button">about</router-link>
    <router-view></router-view>
  </div>
</body>
<script>
  // 主路由开始
  const home = {
    template: `
      <div id="one">
        <h1>
          首页
        </h1>
        <!-- 该理由下的二级路由的视图加载位置 -->
        <router-link to="/home/tuijian" tag="button">remen</router-link>
        <router-link to="/home/remen" tag="button">tuijian</router-link>
        <router-view></router-view>
      </div>
    `
  }
  const about = {
    template: `
      <div>
        <h1>
          关于
        </h1>
      </div>
    `
  }
  const news = {
    template: `
      <div>
        <h1>
          新闻
        </h1>
      </div>
    `
  }//主路由结束
  

  //二级路由开始
  const tuijian = {//该二级路由增加在home一级路由里
    template: `
      <div id="two">
        <h1>
          推荐
        </h1>
        <!-- 该路由下的三级路由视图加载位置 -->
        <router-link to="/home/tuijian/jingpin" tag="button">jingpin</router-link>
        <router-link to="/home/tuijian/changxiao" tag="button">changxiao</router-link>
        <router-view></router-view>
      </div>
    `
  }
  const remen = {
    template: `
      <div>
        <h1>
          热门
        </h1>
      </div>
    `
  }//二级路由开始
  

  //三级路由开始
  const jingpin = {
    template: `
      <div id="three">
        <h1>
          精品
        </h1>
      </div>
    `
  }
  const changxiao = {
    template: `
      <div>
        <h1>
          畅销
        </h1>
      </div>
    `
  }//三级路由结束


  const router = new VueRouter({//实例VueRouter路由对象
    routes: [
      {
        path: "/home",//路由路径
        component: home,//组件对象
        children: [//下面的子路由
          { path: "/home/tuijian", 
          //注意：子路由的路径如果不带上父路由的路径，会在跳转后把父路由的路径干掉视图会很突兀，代码也会难以找到联系
            component: tuijian,
            children: [//也是子路由（tuijian子路由下的子路由）
              {
                path: "/home/tuijian/jingpin",
                component: jingpin
              },
              {
                path: "/home/tuijian/changxiao",
                component: changxiao
              }
            ] 
          },
          { path: "/home/remen", component: remen }
        ]
      },
      { path: "/news", component: news },
      { path: "/about", component: about },
    ]
  })
  const v = new Vue({//实例组件
    el: "#app",
    router
  })
</script>
</html>
vue -＞路由的嵌套
