系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站！

CMS教程 |服务器设置 |网页制作 |网络编程 | 脚本专栏 |重装教程 | 如何安装系统？ |
网站导航

系统下载

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

软件下载

电脑软件 安卓软件 安卓应用 安卓游戏

文章资讯

IT资讯 系统教程 软件教程 U盘教程 系统帮助

系统相关

系统主题 Win10激活工具 Win8激活工具 Win7激活工具

专题合集

软件合集 教程专题 安卓推荐
电脑配置
配置清单 品牌机 组装机 一体机 笔记本
软件
  • 软件
  • 文章
  • 安卓
搜 索

热搜：番茄花园 电脑公司 萝卜家园 深度技术 雨林木风

首页 XP系统 Win7系统 Win10系统 win11系统 在线装机 U盘启动 系统教程 IT资讯
组装电脑 监控安装 打印机 投影机 U盘安装 一键重装 U PE教程 重装大师 网络知识 bios设置 电脑配置
当前位置：首页 > 网络编程 > 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程序设计有所帮助。

分享到：

相关信息

如何使用正则表达式保留部分内容的替换功能
gulp-font-spider实现中文字体包压缩实践
ChatGPT在前端领域的初步探索

热门系统总排行

装机必备

系统教程栏目

系统帮助 游戏攻略 win12教程 监控安装 祥瑞电脑 重装大师 重装教程 bios 其它教程 软件教程 苹果MAC教程 Linux教程 Win2003教程 Win2008教程 U盘教程 WinXP教程 Win7教程 Win8教程 Win10教程 win11教程 打印机

栏目热门教程

人气教程排行

站长推荐

热门系统下载

软件发布| Tag标签| 版权声明| 网站地图| 软件专题| sitemap| 系统城一键重装系统QQ群

本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。

皖ICP备11004271号-6版权所有：固镇县祥瑞电脑科技销售部