Vue三層嵌套路由使用心得-js教程-PHP中文網

首頁

web前端

js教程

Vue三層嵌套路由使用心得

php中世界最好的语言

May 12, 2018 pm 02:34 PM

使用心得路由

這次帶給大家Vue三層嵌套路由使用心得，Vue三層嵌套路由所使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

Vue嵌套路由：

實現效果(路由三層嵌套，點選一級tab顯示二級tab效果，二級tab點選切換對應內容,不在tab區域裡的內容，切換時不重複渲染)：

Demo訪問時路徑：http://IP:連接埠/#/routers/

1.建立案例資料夾page/routers/

#1 routers/index.vue

<template>
 <p>
   <router-link>首页</router-link>
   <router-link>新闻</router-link>
   <router-link>娱乐</router-link>
  
    <!-- 二级子路由页面 -->
    <router-view></router-view>
 </p>
</template>
<script>
export default {
 data(){
  return {
     selected: 1
  }
 },
 methods: {
  tabck(index){
    this.selected = index; //设置tab选中项
  }
 }
}
</script>
<style>
 .rlink {
  padding: 5px;
  margin: 5px;
  margin-bottom: 10px;
  display: inline-block;
  text-decoration: none;
  color: blue;
 }
 .rlink.active {
  color: red;
  text-decoration: underline;
 }
</style>

1-1- 1 routers/home/index.vue

<template>
 <p>
   HOME页面信息：<br>
   <router-link>最新HOME</router-link>
   <router-link>国际HOME</router-link>
   <router-link>国内HOME</router-link>
  
  <!-- 子路由(三层) -->
   <router-view></router-view>
 </p>
</template>
<script>
 export default {
  data(){
    return {
      selected: 1
    }
  },
  methods: {
   tabck(index) {
     this.selected = index; //设置选中tab
   }
  }
 }
</script>
<style>
</style>

1-1-2 routers/home/tab/gj.vue、gn.vue、zx.vue

gj.vue：

<template>
 <p>
    国际HOME信息：<br>
     </p>
<ul>
       <li>{{result.name}}{{index}}</li>
     </ul>
 
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:&#39;国际HOME&#39;},
      {name:&#39;国际HOME&#39;},
      {name:&#39;国际HOME&#39;}
     ]
   }
  }
 }
</script>

gn.vue :

<template>
 <p>
    国内HOME信息：<br>
     </p>
<ul>
       <li>{{result.name}}{{index}}</li>
     </ul>
 
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:&#39;国内HOME&#39;},
      {name:&#39;国内HOME&#39;}
     ]
   }
  }
 }
</script>

zx.vue：

<template>
 <p>
    最新HOME信息：<br>
     </p>
<ul>
       <li>{{result.name}}{{index}}</li>
     </ul>
 
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:&#39;最新HOME&#39;}
     ]
   }
  }
 }
</script>

1-2 routers/news/index.vue

<template>
 <p>
    新闻页面信息：<br>
    <router-link>最新新闻</router-link>
    <router-link>国际新闻</router-link>
    <router-link>国内新闻</router-link>
  <!-- 子路由 -->
  <router-view></router-view>
 </p>
</template>
<script>
 export default {
  data () {
   return {
     selected: 1
   }
  },
  methods: {
   tabck(index){
    this.selected = index; //切换tab，设置选中项
   }
  } 
 }
</script>

1-2-1 routers/ news/tab/gj.vue、gn.vue、zx.vue

gj.vue：

<template>
 <p>
    国际新闻信息：<br>
     </p>
<ul>
       <li>{{result.name}}{{index}}</li>
     </ul>
 
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:&#39;国际新闻信息&#39;},
      {name:&#39;国际新闻信息&#39;},
      {name:&#39;国际新闻信息&#39;},
      {name:&#39;国际新闻信息&#39;},
      {name:&#39;国际新闻信息&#39;}
     ]
   }
  }
 }
</script>

gn.vue：

<template>
 <p>
    国内新闻信息：<br>
     </p>
<ul>
       <li>{{result.name}}{{index}}</li>
     </ul>
 
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:&#39;国内新闻信息&#39;},
      {name:&#39;国内新闻信息&#39;}
     ]
   }
  }
 }
</script>

zx.vue：

<template>
 <p>
    最新新闻信息：<br>
     </p>
<ul>
       <li>{{result.name}}{{index}}</li>
     </ul>
 
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:&#39;最新新闻信息&#39;},
      {name:&#39;最新新闻信息&#39;}
     ]
   }
  }
 }
</script>

1-3-1 routers/yl/index.vue

<template>
 <p>
    娱乐页面信息：<br>
    <router-link>最新娱乐</router-link>
    <router-link>明星娱乐</router-link>
    <router-link>焦点娱乐</router-link>
   
    <!-- 子路由-->
    <router-view></router-view>
 </p>
 <script>
  export default {
   data(){
    return {
     selected: 1
    }
   },
   methods: {
    tabck(index){
     this.selected = index; //设置tab选中项
    }
   }
  }
 </script>
</template>

1-3-2 routers/yl/tab/jd.vue、mx.vue、zx.vue

#jd.vue：

<template>
 <p>
    焦点娱乐信息：<br>
     </p>
<ul>
       <li>{{result.name}}{{index}}</li>
     </ul>
 
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:&#39;焦点娱乐信息&#39;},
      {name:&#39;焦点娱乐信息&#39;}
     ]
   }
  }
 }
</script>

mx.vue：

<template>
 <p>
    明星娱乐信息：<br>
     </p>
<ul>
       <li>{{result.name}}{{index}}</li>
     </ul>
 
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:&#39;明星娱乐信息&#39;},
      {name:&#39;明星娱乐信息&#39;}
     ]
   }
  }
 }
</script>

zx.vue：

<template>
 <p>
    最新娱乐信息：<br>
     </p>
<ul>
       <li>{{result.name}}{{index}}</li>
     </ul>
 
</template>
<script>
 export default {
  data(){
   return {
     list: [
      {name:&#39;最新娱乐信息&#39;},
      {name:&#39;最新娱乐信息&#39;}
     ]
   }
  }
 }
</script>

2.路由設定規則(router/index.js)

....
 省略导入路由、使用路由代码...
....
// 嵌套路由的使用：第一层
import Rindex from '../page/routers/index'
// 嵌套路由的使用：第二层
import Rhome from '../page/routers/home/index'
// 嵌套路由的使用：第三层
import Rhomezx from '../page/routers/home/tab/zx'
import Rhomegj from '../page/routers/home/tab/gj'
import Rhomegn from '../page/routers/home/tab/gn'
import Rnews from '../page/routers/news/index'
import Rnewszx from '../page/routers/news/tab/zx'
import Rnewsgj from '../page/routers/news/tab/gj'
import Rnewsgn from '../page/routers/news/tab/gn'
import Ryl from '../page/routers/yl/index'
import Rylzx from '../page/routers/yl/tab/zx'
import Rylmx from '../page/routers/yl/tab/mx'
import Ryljd from '../page/routers/yl/tab/jd'
// 路由规则配置：
export default new Router({
 routes : [
  {
   name: 'rindex',
   path: '/routers',
   component: Rindex,
   redirect: {name: 'rindex_rhome'}, // 跳转到下一级第一个
   children: [
     {
       name: 'rindex_rhome',
       path: 'rindex_rhome', //如果这里不使用 "/rhome" 则表示是归属于上级路由（上级luyou/子path），如果使用 "/rhome" 则表示根路径下访问
       component: Rhome,
       redirect: {name: 'rindex_rhome_Rhomezx'}, //跳转到下级第一层
       children: [
        {
         name: 'rindex_rhome_Rhomezx',
         path: 'rindex_rhome_Rhomezx',
         component: Rhomezx
        },
        {
         name: 'rindex_rhome_Rhomegj',
         path: 'rindex_rhome_Rhomegj',
         component: Rhomegj
        },
        {
         name: 'rindex_rhome_Rhomegn',
         path: 'rindex_rhome_Rhomegn',
         component: Rhomegn
        }
      ]
     },
     {
      name: 'rindex_rnews',
      path: 'rindex_rnews',
      component: Rnews,
      redirect: {name: 'rindex_rnews_Rnewszx'},
      children: [
       {
         name: 'rindex_rnews_Rnewszx',
         path: 'rindex_rnews_Rnewszx',
         component: Rnewszx
       },
       {
         name: 'rindex_rnews_Rnewsgj',
         path: 'rindex_rnews_Rnewsgj',
         component: Rnewsgj
       },
       {
         name: 'rindex_rnews_Rnewsgn',
         path: 'rindex_rnews_Rnewsgn',
         component: Rnewsgn
       }
      ]
    },
    {
      name: 'rindex_ryl',
      path: 'rindex_ryl',
      component: Ryl,
      redirect: {name: 'rindex_ryl_rylzx'},
      chidren:[
        {
          name: 'rindex_ryl_rylzx',
          path: 'rindex_ryl_rylzx',
          component: Rylzx
        },
        {
          name: 'rindex_ryl_rylmx',
          path: 'rindex_ryl_rylmx',
          component: Rylmx
        },
        {
          name: 'rindex_ryl_ryljd',
          path: 'rindex_ryl_ryljd',
          component: Ryljd
        }
      ]
    }
   ]
  }
 ]
});

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js計算與偵聽器屬性使用詳解

H5的data-*自定義屬性使用詳解

以上是Vue三層嵌套路由使用心得的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

See all articles