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 相关文章推荐
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 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
php设计模式 Composite (组合模式)
2011/06/26 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
python optparse模块使用实例
2015/04/09 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Django开发中复选框用法示例
2018/03/20 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
python解释器spython使用及原理解析
2019/08/24 Python
如何在python中执行另一个py文件
2020/04/30 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
信息科学与技术专业求职信范文
2014/02/20 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
大班开学家长寄语
2014/04/04 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年司机工作总结
2015/04/23 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS