Vue中路由嵌套（子路由）-蒲公英云

Vue中路由嵌套（子路由）

野性酷女 2022-12-25 15:56 356阅读 0赞

路由的嵌套就是点击一个路由地址后，继续点击，进入到另外一个路由地址下，即第二个路由就是第一个路由的子路由。
根据我们前面学习的VueRouter的知识，可以直接写出代码来实现：

一般写法

<!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="./lib/vue-2.4.0.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 </head>
 <body>
   <div id="app">
     <router-link to="/account">account</router-link>
     <router-view></router-view>
    </div>
    <template id="temp">
      <div>
        <h1>Account组件</h1>
        <router-link to="/account/login">登录</router-link>
      </div>
    </template>
   <script> var account = { template:'#temp', } var router = new VueRouter({ routes:[ { path:'/account',component:account}, ] }) new Vue({ el:'#app', data:{ }, methods: { }, router }) </script>
</body>
</html>

点击account—路由跳转到/account下：
在这里插入图片描述

再点击登录，跳转至/account/login：

改进写法

我们发现login路由是account路由下的一个子路由，形成了一个父子组件路由。VueRouter提供给我们一个属性== children ==来是实现路由的嵌套：

<!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="./lib/vue-2.4.0.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 </head>
 <body>
   <div id="app">
     <router-link to="/account">account</router-link>
     <router-view></router-view>
    </div>
    <template id="temp">
      <div>
          <h1>这是Account组件</h1>
          <router-link to="/account/login">登录</router-link>
          <router-link to="/account/register">注册</router-link>
          <router-view></router-view>
      </div>
  </template>
  <script> var account={ template:'#temp' } var login={ template:'<h1>登录的组件显示</h1>' } var register={ template:'<h1>注册的组件显示</h1>' } var router=new VueRouter({ routes: [ { path:'/account', component:account, children:[ { path:'login',component:login}, { path:'register',component:register} ] }, ] }) var vm=new Vue({ el:'#app', data:{ }, methods: { }, router }) </script>
</body>
</html>

点击account，跳转到子路由login中：
在这里插入图片描述

再分别点击子路由，进入到子路由下：

注意

使用children属性实现子路由时，子路由path前面不能带/，以/ 开头的嵌套路径会被当作根路径否则会永远以根路由开始请求, 这样不方便我们调用渲染数据

应用— 实现一个经典布局

<!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="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <style> html,body{ margin: 0; padding: 0; } .header{ background-color: orange; height:80px; } h1{ margin: 0; padding: 0; font-size: 16px; } .container{ display: flex; height: 600px; } .left{ background-color: lightgreen; flex: 2; } .main{ flex: 8; background-color: lightpink; } </style>
</head>
<body>
    <div id="app">
        <router-view></router-view>
        <div class="container">
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>
    </div>
    <script> var header={ template:'<h1 class="header">Header头部区域</h1>' } var leftBox={ template:'<h1 class="left">Left侧边栏区域</h1>' } var mainBox={ template:'<h1 class="main">mainBox主体内容</h1>' } var router=new VueRouter({ routes: [ { path:'/', components:{ 'default':header, 'left':leftBox, 'main':mainBox } } ] }) var vm=new Vue({ el:'#app', data:{ }, methods: { }, router }) </script>
</body>
</html>