详解vue-router2.0动态路由获取参数


Posted in Javascript onJune 14, 2017

一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="vue.js"></script>
 <script type="text/javascript" src="vue-router.min.js"></script>
</head>

<body>
 <div id="box">
  <!-- 跳转路径 -->
  <router-link to="/home">home</router-link>
  <router-link to="/news">news</router-link>
  <div>
   <router-view></router-view>
  </div>
 </div>
 <script type="text/javascript">
 var News = {
  template:` 
  <div>
    <h3>新闻</h3>
   <router-link to="/news/yule/article/001">娱乐频道</router-link>
    <router-link to="/news/zhibo/article/002">直播频道</router-link>
    <div><router-view></router-view></div>
  </div>
  `
 };

 var User = {
   template: '<p>获取到数据:{{$route.params}}</p>'
 };

 var Home = {
  template: '<h3>主页</h3>'
 };
 // 配置路由
 var jump = [{
  path: '/home',
  component: Home
 }, {
  path: '/news',
  component: News,
  // 配置子路由
  children:[{
   // 冒号后面的数据可获取是动态的
    path:':tv/article/:num',
    component:User
  }]
 }, {
  path: '*',
  redirect: '/home'
 }];
 // 创建实例
 var router = new VueRouter({
  routes: jump
 });
 // 挂载实例
 var app = new Vue({
  el: '#box',
  router: router
 })
 </script>
</body>

</html>

详解vue-router2.0动态路由获取参数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
微信小程序动态添加分享数据
Jun 14 #Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 #Javascript
JS查找数组中重复元素的方法详解
Jun 14 #Javascript
JS设置手机验证码60s等待实现代码
Jun 14 #Javascript
jQuery ajax动态生成table功能示例
Jun 14 #jQuery
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 #Javascript
vue-loader教程介绍
Jun 14 #Javascript
You might like
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
js 数据类型转换总结笔记
2011/01/17 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python内置函数delattr的具体用法
2017/11/23 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
我的大学生活职业生涯规划
2014/01/02 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
实习计划书范文
2015/01/16 职场文书
秦兵马俑导游词
2015/02/02 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
出国留学导师推荐信
2015/03/26 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
合作意向书怎么写
2019/06/24 职场文书
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android