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 常用代码技巧大收集
Feb 25 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
js获取图片宽高的方法
Nov 25 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
JS如何生成随机验证码
Mar 02 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
JavaScript实现简单动态表格
Dec 02 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
PHP内置加密函数详解
2016/11/20 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python Map 函数的使用
2020/08/28 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
银行办公室岗位职责
2014/03/10 职场文书
中学生检讨书范文
2014/11/03 职场文书
先进事迹材料范文
2014/12/29 职场文书
计划生育责任书
2015/05/09 职场文书
销售会议开幕词
2016/03/04 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers