详解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 入门讲解1
Apr 15 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
js给selected添加options的方法
May 06 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
js实现圆形显示鼠标单击位置
Feb 11 Javascript
浅谈JavaScript中this的指向更改
Jul 28 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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP创建XML接口示例
2019/07/04 PHP
Javascript 面向对象特性
2009/12/28 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
简单介绍Ruby中的CGI编程
2015/04/10 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
学子宴答谢词
2014/01/25 职场文书
前台文员职责范本
2014/03/07 职场文书
新闻发布会主持词
2014/03/28 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js