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 UI皮肤定制
Jul 27 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
vue中的inject学习教程
Apr 24 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
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
python比较两个列表是否相等的方法
2015/07/28 Python
python机器学习之神经网络(二)
2017/12/20 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
python 用struct模块解决黏包问题
2020/11/07 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
满月酒邀请函
2015/01/30 职场文书
小学教师个人总结
2015/02/05 职场文书
会计试用期自我评价
2015/03/10 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers