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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
JavaScript实现栈结构详细过程
Dec 06 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
模拟xcopy的函数
2006/10/09 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP静态成员变量
2017/02/14 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
使用正则替换变量
2007/05/05 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
python避免死锁方法实例分析
2015/06/04 Python
图解Python变量与赋值
2018/04/03 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
手工社团活动方案
2014/02/17 职场文书
2015感人爱情寄语
2015/02/26 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python