一下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动态路由获取参数的更多相关文章

  1. Nuxt配置动态路由以及参数校验

    动态路由就是带参数的路由.比如我们商品列表里很多商品详细页,这时候就需要动态路由的帮助了. 比如我们新建一个commodity文件夹,新建一个index.vue 文件,然后新建一个_id.vue (以 ...

  2. vue+iview实现动态路由和权限验证

    github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Gith ...

  3. Vue跳转相同路由不同参数，解决页面数据不自动刷新

    参考: https://www.cnblogs.com/ainyi/p/9340311.html https://blog.csdn.net/weixin_41888813/article/detai ...

  4. vue 页面间使用路由传参数,刷新页面后获取不到参数的问题

    情况 情况再简单说明一下: 有三个页面(a-列表页面,b-内页1,c-内页2),页面a->页面b->页面c有参数传递.从a进入b后,刷新b页面拿不到a页面传进来的参数.或者b页面再进入c页 ...

  5. vue前后分离动态路由和权限管理方案

    需求 需要根据不同的角色来显示不同的菜单 问题 系统是前后分离模式开发的,出现了后端接口和前端路由都需要权限管理. 思路 后端的接口肯定得验证权限 在前端做好组件名和组件的映射 前端的路由通过后端发回 ...

  6. vue系列之动态路由【原创】

    开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了 ...

  7. vue-router动态路由设置参数可选

    在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上. 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 ...

  8. VUE -- router 传参和获取参数

  9. vue 动态路由 Get传值

    main.js //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', compone ...

随机推荐

  1. [傻瓜版] Redis在Windows下的开发环境配置步骤

    redis默认运行在unix体系下,windows无法直接运行官方版.以下是几种解决方案, 一)Windows移植版.启动速度飞快,优先推荐使用. a) 2.6.12 是稳定版,我用64位版来做开发环 ...

  2. asp.net core mvc剖析：路由

    在mvc框架中,任何一个动作请求都会被映射到具体控制器中的方法上,那框架是如何完成这样一个过程的,现在我们就来简单分析下流程. 我们紧跟上面的主题,任何一个请求都会交给处理管道进行处理,那mvc处理的 ...

  3. vue实现图书管理demo

    年后公司的项目要求用到vue.js知识,我angular没有学,node.js和react也只是了解了一点点,所以学起来比较困难.如果你想学vue.js的知识,推荐网址:http://vuejs.or ...

  4. c#导入excel 绑定数据 repeat为例子

    先读取Excel文件并存到dataset public DataSet ExcelToDataTable(string filename, string strsheetname) { try { / ...

  5. 快看我解决了一个Nginx的小问题

    前言 最近小编写项目的时候,需要用到Nginx服务器,对于Nginx正常安装就好了详情见[我是传送门],正当一切安好的时候问题来了,这台服务器的80端口竟然被占用了,什么鬼?怎么办,只有改端口.具体方 ...

  6. 第三方库AFNetworking 3.1.0的简单使用

    AFNetworking是一个 在iOS开发中 使用非常多网络开源库.它是一个轻量级的网络请求API类库. 适用于iOS以及Mac OS X.它构建于在(Apple iOS开发文档) NSURLCon ...

  7. Java显式锁学习总结之六：Condition源码分析

    概述 先来回顾一下java中的等待/通知机制 我们有时会遇到这样的场景:线程A执行到某个点的时候,因为某个条件condition不满足,需要线程A暂停:等到线程B修改了条件condition,使con ...

  8. Asp.net缓存技术（HttpRuntime.Cache）

    一.缓存: 5个等级的缓存 1级是网络级缓存,缓存在浏览器,CDN以及代理服务器中   (举个例子:每个帮助页面都进行了缓存,访问一个页面的代码非常简单) 2级是由.net框架 HttpRuntime ...

  9. Android SDK教程

    Android SDK 网络问题解析 Android 客户端网络不稳定,会导致App 有时候无法及时收到 Push 消息. 很多开发者认为这是因为 JPush 推送不稳定.延迟,甚至有时候认为 JPu ...

  10. “幸福企业”定义-参观“MES项目”有感

    作为公司的员工,总是想在一个自己满意的企业里面发展.作为企业主,虽不能天天将“回报社会”挂在嘴上,但凡是有抱负的,还是希望自己的部下“以厂为家的”.然而劳资双方的矛盾总是让双方感觉互有亏欠.这种不信任 ...