vue筆記-19（vue路由參數(shù)和嵌套路由）

  • 路由規(guī)則中定義參數(shù)
    1. 使用查詢參數(shù)則不需要修改path,調(diào)用方式<router-link to="/login?id=1">，在組件模板中使用this.$route.query.id獲取
    2. 使用路徑變量傳參，需要修改path,如”/login/:id“。調(diào)用方式<router-link to="/login/1">，使用this.$route.params.id
    3. 代碼demo
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02vue-router路由參數(shù)</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="./lib/vue-router.js"></script>

  <!-- routerlink默認(rèn)選中樣式為router-link-active -->
  <style>
      .router-link-active{
          color:red;
          background-color: green;
          font-size: 20px;
      }

      .v-enter,
      .v-leave-to{
          opacity: 0;
          transform: translateX(150px)
      }

      .v-enter-active,
      .v-leave-active{
          transition: all 0.5s ease;
      }
  </style>
</head>

<body>
  <div id="app">
      <!-- 1. 使用查詢參數(shù)方式傳參，不用修改vue-router中的path -->
      <router-link to="/login?id=1" tag="span">登錄</router-link>

      <!-- 2. 使用路徑變量方式傳參，需要修改vue-router中的path -->
      <router-link to="/register/1" tag="span">注冊(cè)</router-link>

      <!--展示路由組件的元素-->
      <transition mode="out-in">
          <router-view></router-view>
      </transition>
  </div>

  <template id="login">
      <div>
          <br/>
          用戶名：<input type="text" name="username" id="username"><br/>
          密碼：<input type="text" name="password" id="password"><br />
          <input type="button" value="登錄"><br />
          this is the login page.the transform param is {{this.$route.query.id}}
      </div>
  </template>

  <template id="register">
      <div>
          <br />
          用戶名：<input type="text" name="username" id="username"><br />
          密碼：<input type="text" name="password" id="password"><br />
          確認(rèn)密碼：<input type="text" name="password" id="password"><br />
          <input type="button" value="注冊(cè)"><br />
          this is the register page.the transform param is {{this.$route.params.id}}
      </div>
  </template>

  <script>
      //定義VueRouter變量
      var routerObj = new VueRouter({
          routes: [
              {
                  path: '/login',
                  component: {
                      template: '#login'
                  } //通過component指定路由跳轉(zhuǎn)到的組件
              }, {
                  path: '/register/:id',
                  component: {
                      template: '#register'
                  }
              }
          ]
      })

      var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router: routerObj
      })
  </script>
</body>
</html>
  • 路由的嵌套
    1. 在vue-router對(duì)象里定義children屬性
    2. 子路由路徑地址最好使用”父路由名/子路由名“的方式定義跳轉(zhuǎn)路由路徑
    3. 在子路由children里定義的path, 最好不要帶有/前綴,否則永遠(yuǎn)以根路徑開始請(qǐng)求，這樣不方便我們用戶去理解URL地址
    4. 代碼demo
     <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>04vue-router路由嵌套</title>
 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
 <script src="./lib/vue-router.js"></script>
</head>
<body>
 <div id="app">
     <router-link to="/account">賬戶</router-link>

     <!-- 顯示父路徑 /account 展示跳轉(zhuǎn)組件的頁面 -->
     <router-view></router-view>
 </div>

 <template id="account">
     <div>
         <router-link to="/account/login">登錄</router-link>
         <router-link to="/account/register">注冊(cè)</router-link>
         
         <!-- 需要在父模板里定義 router-view 用于展示子路徑跳轉(zhuǎn)組件顯示的頁面 -->
         <router-view></router-view> 
     </div>
 </template>

 <template id="login">
     <div>
         <br />
         用戶名：<input type="text" name="username" id="username"><br />
         密碼：<input type="text" name="password" id="password"><br />
         <input type="button" value="登錄"><br />
     </div>
 </template>

 <template id="register">
     <div>
         <br />
         用戶名：<input type="text" name="username" id="username"><br />
         密碼：<input type="text" name="password" id="password"><br />
         確認(rèn)密碼：<input type="text" name="password" id="password"><br />
         <input type="button" value="注冊(cè)"><br />
     </div>
 </template>

 <script>
     //定義VueRouter變量
     var routerObj = new VueRouter({
         routes: [{
             path: "/account",
             component: {
                 template: '#account'
             },
             children: [{
                 path: 'login', //注意這里的路徑不能以 "/" 開頭
                 component: {
                     template: '#login'
                 }
             }, {
                 path: 'register',
                 component: {
                     template: '#register'
                 }
             }]
         }]
     })

     var vm = new Vue({
         el: '#app',
         data: {},
         methods: {},
         router: routerObj
     })
 </script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容