系統城裝機大師 - 唯一官網：www.farandoo.com！

打印機 |投影機 |數據庫 |CMS教程 |服務器設置 |網頁制作 |網絡編程 | 腳本專欄 |重裝教程 | 如何安裝系統？ |
網站導航

系統下載

Win10系統 Win8系統 Win7系統 WinXP系統 路由器

軟件下載

電腦軟件 安卓軟件 安卓應用 安卓游戲

文章資訊

IT資訊 系統教程 軟件教程 U盤教程 系統幫助

系統相關

系統主題 Win10激活工具 Win8激活工具 Win7激活工具

專題合集

軟件合集 教程專題 安卓推薦
電腦配置
配置清單 品牌機 組裝機 一體機 筆記本
軟件
  • 軟件
  • 文章
  • 安卓
搜 索

熱搜：番茄花園 電腦公司 蘿卜家園 深度技術 雨林木風

首頁 XP系統 Win7系統 Win10系統 win11系統 在線裝機 U盤啟動 系統教程 IT資訊
Win8系統 Linux系統 Server系統 MacOS系統 U PE教程 重裝大師 裝機精靈 網絡知識 bios設置 電腦配置
當前位置：首頁 > 網絡編程 > JavaScript > 詳細頁面

vue2路由方式--嵌套路由實現方法分析

時間：2020-03-06來源：電腦系統城作者：電腦系統城

前面講過了vue2路由基本用法，一般應用中的路由方式不會像上述例子那么簡單，往往會出現二級導航這種情況。這時就需要使用嵌套路由這種寫法。


 
  1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  3. <html>
  4. <head>
  5. <title>routerTest1</title>
  6. <c:import url="importFile.jsp"></c:import>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <nav class="navbar navbar-inverse">
  11. <div class="container-fluid">
  12. <div class="navbar-header">
  13. <a class="navbar-brand" href="#" rel="external nofollow" >Brand</a>
  14. </div>
  15. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  16. <ul class="nav navbar-nav">
  17. <%--定義跳轉的路徑--%>
  18. <li class="active"> <router-link to="/home">Home</router-link></li>
  19. <li> <router-link to="/list">List</router-link></li>
  20. </ul>
  21. </div>
  22. </div>
  23. </nav>
  24. <div class="container">
  25. <!—路由切換組件template 插入的位置 -->
  26. <router-view></router-view>
  27. </div>
  28. </div>
  29.  
  30. <script type="x-template" id="modalTel">
  31. <div>
  32. <h1> this is home page </h1>
  33. <div>
  34. <ul >
  35. <li>
  36. <router-link to="/home/lists">List</router-link>
  37. </li>
  38. <li>
  39. <router-link to="/home/detail">Detail</router-link>
  40. </li>
  41. </ul>
  42. </div>
  43. <router-view></router-view>
  44. </div>
  45.  
  46. </script>
  47. <script>
  48.  
  49. /*
  50. * var Home = Vue.extend({
  51. template:'<h1> this is home page </h1>',
  52. })
  53. * */
  54. /*使用Javascript模板定義組件*/
  55. var Home = Vue.extend({
  56. template:'#modalTel'
  57. })
  58.  
  59. /*創建路由器實例*/
  60. const router = new VueRouter({
  61. routes:[
  62. { path: '/', redirect: '/home' },
  63. {
  64. path:'/home',
  65. component:Home,
  66. /*嵌套下的路由（子路由）*/
  67. children:[
  68. {
  69. path:'/home/lists',
  70. component:{
  71. template:'<h1> this is lists pages</h1>'
  72. },
  73.  
  74. },
  75. {
  76. path:'/home/detail',
  77. component:{
  78. template:'<h1> this is detail pages</h1>'
  79. },
  80. }
  81. ]
  82. },
  83. {
  84. path:'/list',
  85. component:{
  86. /*顯示路由的屬性*/
  87. template:'<h1> this is list page----{{$route.path}}</h1>'
  88. }
  89. }
  90. ]
  91. });
  92. const app = new Vue({
  93. router:router
  94. }).$mount('#app')
  95. </script>
  96. </body>
  97. </html>
  98.  

vue2路由方式--嵌套路由實現方法分析

上文中的 importFile,jsp 在上一篇路由基本用法中介紹過了，就是引入需要的文件。

希望本文所述對大家vue.js程序設計有所幫助。

分享到：

相關信息

Vue3 響應式偵聽與計算的實現
詳解mybatis-plus配置找不到Mapper接口路徑的坑
SpringBoot下使用MyBatis-Puls代碼生成器的方法

熱門系統總排行

裝機必備

系統教程欄目

Win10教程 重裝大師 重裝教程 bios 其它教程 系統幫助 蘋果MAC教程 Linux教程 Win2003教程 Win2008教程 U盤教程 WinXP教程 Win7教程 Win8教程 軟件教程 win11教程 打印機

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

軟件發布| Tag標簽| 版權聲明| 網站地圖| 軟件專題| sitemap| 系統城一鍵重裝系統QQ群

本站發布的系統與軟件僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！如侵犯到您的權益,請及時通知我們,我們會及時處理。

皖ICP備11004271號-6版權所有：固鎮縣祥瑞電腦科技銷售部

jlzzjlzz亚洲乱熟在线播放