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新闻滚动插件 jquery.roller.js
Jun 27 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 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 imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
关于vue组件事件属性穿透详解
2019/10/28 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python和C语言混合编程实例
2014/06/04 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python深度优先算法生成迷宫
2018/01/22 Python
python计算两个数的百分比方法
2018/06/29 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python验证码截取识别代码实例
2020/05/16 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
一套C#面试题
2013/10/09 面试题
国外的一些J2EE面试题一
2012/10/13 面试题
远程教育心得体会
2014/01/03 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS
Python利用capstone实现反汇编
2022/04/06 Python
2022年显卡天梯图(6月更新)
2022/06/17 数码科技