详解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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
js+css在交互上的应用
Jul 18 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
解析vue中的$mount
Dec 21 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 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
ThinkPHP 404页面的设置方法
2015/01/14 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
ptyhon实现sitemap生成示例
2014/03/30 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python实现登陆文件验证方法
2018/10/06 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
学校安全教育月活动总结
2014/07/07 职场文书
医院合作协议书
2014/08/19 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
普通员工辞职信范文
2015/05/12 职场文书
法制主题班会教案
2015/08/13 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技