vue-router 路由传参用法实例分析


Posted in Javascript onMarch 06, 2020

本文实例讲述了vue-router 路由传参用法。分享给大家供大家参考,具体如下:

在设置路由规则时,我们可以给路径名设置一个别名,方便进行路由跳转,而不需要去记住过长的全路径。

例如:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>routerTest1</title>
  <c:import url="importFile.jsp"></c:import>
</head>
<body>
<div id="app">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#" rel="external nofollow" >Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <%--定义跳转的路径--%>
          <li class="active"> <router-link to="/home">Home</router-link></li>
          <li> <router-link to="/list">List</router-link></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <!—路由切换组件template 插入的位置 -->
    <router-view></router-view>
  </div>
</div>
<template id="users">
  <div class="container">
    <h1> this is list page----{{$route.path}}</h1>
    <h2>用户信息</h2>
     <router-link to="/list/user/001">用户{{$route.params.id}}</router-link>
    <router-link to="/list/user/002">用户{{$route.params.id}}</router-link>
  </div>
</template>
 
<script type="x-template" id="modalTel">
  <div>
    <h1> this is home page </h1>
    <div>
      <ul >
        <li>
          <router-link to="/home/lists">List</router-link>
        </li>
        <li>
          <router-link to="/home/detail">Detail</router-link>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
 
</script>
<script>
 
  /*
   * var Home = Vue.extend({
   template:'<h1> this is home page </h1>',
   })
   * */
  /*使用Javascript模板定义组件*/
  var Home = Vue.extend({
    template:'#modalTel'
  })
 
  /*创建路由器实例*/
  const router = new VueRouter({
    routes:[
      { path: '/', redirect: '/home' },
      {
        path:'/home',
        component:Home,
        /*嵌套下的路由(子路由)*/
        children:[
          {
            path:'/home/lists',
            component:{
              template:'<h1> this is lists pages</h1>'
            },
 
          },
          {
            path:'/home/detail',
            component:{
              template:'<h1> this is detail pages</h1>'
            },
          }
        ]
      },
      {
        path:'/list',
        component:{
          /*显示路由的属性*/
          template:'#users',
        },
      },
      {
        path:'/list/user/:id',
        component:{
          template: '<h3>用户Id{{$route.params.id}} </h3>'
        }
      }
    ]
  });
  const app = new Vue({
    router:router
  }).$mount('#app')
</script>
</body>
</html>

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

vue-router 路由传参用法实例分析

vue-router 路由传参用法实例分析

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
详解Vite的新体验
Feb 22 Javascript
JavaScript前端实现压缩图片功能
Mar 06 #Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 #Javascript
vue2路由基本用法实例分析
Mar 06 #Javascript
vue 动态组件用法示例小结
Mar 06 #Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 #Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 #Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 #Javascript
You might like
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
php实现的CSS更新类实例
2014/09/22 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Django内容增加富文本功能的实例
2017/10/17 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
python实现决策树分类(2)
2018/08/30 Python
python实现自动打卡的示例代码
2020/10/10 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
员工自我鉴定
2013/10/09 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
教师节倡议书
2014/08/30 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
开天辟地观后感
2015/06/09 职场文书
师范生见习自我总结
2015/06/23 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
使用Ajax实现无刷新上传文件
2022/04/12 Javascript