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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
JS event使用方法详解
Apr 28 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
在Windows版的PHP中使用ADO
2006/10/09 PHP
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php一些公用函数的集合
2008/03/27 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
vue-router 权限控制的示例代码
2017/09/21 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
wxPython实现列表增删改查功能
2019/11/19 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
Python猜数字算法题详解
2020/03/01 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
30岁生日感言
2014/01/25 职场文书
黄金酒广告词
2014/03/21 职场文书
委托书范文
2014/04/02 职场文书
《开国大典》教学反思
2014/04/19 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python