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

當前位置:首頁 > 網絡編程 > JavaScript > 詳細頁面

vue-router 路由傳參用法實例分析

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

本文實例講述了vue-router 路由傳參用法。分享給大家供大家參考,具體如下:

在設置路由規則時,我們可以給路徑名設置一個別名,方便進行路由跳轉,而不需要去記住過長的全路徑。

例如:


 
  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. <template id="users">
  30. <div class="container">
  31. <h1> this is list page----{{$route.path}}</h1>
  32. <h2>用戶信息</h2>
  33. <router-link to="/list/user/001">用戶{{$route.params.id}}</router-link>
  34. <router-link to="/list/user/002">用戶{{$route.params.id}}</router-link>
  35. </div>
  36. </template>
  37.  
  38. <script type="x-template" id="modalTel">
  39. <div>
  40. <h1> this is home page </h1>
  41. <div>
  42. <ul >
  43. <li>
  44. <router-link to="/home/lists">List</router-link>
  45. </li>
  46. <li>
  47. <router-link to="/home/detail">Detail</router-link>
  48. </li>
  49. </ul>
  50. </div>
  51. <router-view></router-view>
  52. </div>
  53.  
  54. </script>
  55. <script>
  56.  
  57. /*
  58. * var Home = Vue.extend({
  59. template:'<h1> this is home page </h1>',
  60. })
  61. * */
  62. /*使用Javascript模板定義組件*/
  63. var Home = Vue.extend({
  64. template:'#modalTel'
  65. })
  66.  
  67. /*創建路由器實例*/
  68. const router = new VueRouter({
  69. routes:[
  70. { path: '/', redirect: '/home' },
  71. {
  72. path:'/home',
  73. component:Home,
  74. /*嵌套下的路由(子路由)*/
  75. children:[
  76. {
  77. path:'/home/lists',
  78. component:{
  79. template:'<h1> this is lists pages</h1>'
  80. },
  81.  
  82. },
  83. {
  84. path:'/home/detail',
  85. component:{
  86. template:'<h1> this is detail pages</h1>'
  87. },
  88. }
  89. ]
  90. },
  91. {
  92. path:'/list',
  93. component:{
  94. /*顯示路由的屬性*/
  95. template:'#users',
  96. },
  97. },
  98. {
  99. path:'/list/user/:id',
  100. component:{
  101. template: '<h3>用戶Id{{$route.params.id}} </h3>'
  102. }
  103. }
  104. ]
  105. });
  106. const app = new Vue({
  107. router:router
  108. }).$mount('#app')
  109. </script>
  110. </body>
  111. </html>
  112.  

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

vue-router 路由傳參用法實例分析

vue-router 路由傳參用法實例分析

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

分享到:

相關信息

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

jlzzjlzz亚洲乱熟在线播放