源码如下:

import Vue from 'vue'
import VueRouter from 'vue-router' Vue.use(VueRouter) //全局使用该组件 const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{
path:'/'
},
{
path:'/params/:aaa/:bbb' //绑定模板
}
]
}) new Vue({
router,
template:`
<div>
<h1>Good Morning</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/params/111/222">/params/111/222</router-link></li>
</ul>
<p>show</p>
<pre>
<code>
{{$route.params.bbb}}
{{JSON.stringify($route,null,2)}}
</code>
</pre>
</div>
`
}).$mount('#app')

vue 路由 URL传参的更多相关文章

  1. vue路由组件传参

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...

  2. vue 路由动态传参 (多个)

    动态传参 传值页面  客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面  客户详情CustomerDetails.vue 通过this.$router.para ...

  3. Vue根据URL传参来控制全局 console.log 的开关

    如果你的项目中console.log了很多信息,但是发到生产环境上又不想打印这些信息,这时候就需要设置一个全局变量,如:debug, 用正则匹配一下参数: const getQueryStr = (n ...

  4. Django——2 路由分配设置 re_path正则匹配 include总路由 url传参 name使用 模板渲染render方法 模板渲染方法

    Django 路由分配设置 re_path正则匹配 include总路由设置 url额外参数的传递 name的使用 模板的渲染:render方法   路由的分配中, 可以设定相应的转换器加以约束,比如 ...

  5. Vue路由query传参

    1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...

  6. Vue-admin工作整理(四):路由组件传参

    路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...

  7. VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

  8. tornado 02 输出、输入和URL传参

    tornado 02 输出.输入和URL传参 一.输出 write输出到页面 #write可以接受的对象 #write() 可以接受3种对象:bytes Unicode字符(二进制字符) 字典 #如果 ...

  9. 点击div 跳转并通过URL传参

    点击div前要先给div绑定要传的参数: //给panel绑定自定义属性,方便在跳转时传带参数,键/值对排列 panel.attr("user_age",user_age); pa ...

随机推荐

  1. Seam科普

    声明:这是引用的,具体引用位置在最下面. 只供个人学习,免得忘记了又要到处找,十分感谢原作作者.如果有什么问题请联系我. Seam框架开发一个HelloWrld的例子. Seam本身,而在于Seam使 ...

  2. day25-静态、组合、继承

    #!/usr/bin/env python # -*- coding:utf-8 -*- # ----------------------------------------------------- ...

  3. AtCoder ABC 130E Common Subsequence

    题目链接:https://atcoder.jp/contests/abc130/tasks/abc130_e 题目大意 给定一个长度为 N 的序列 S 和一个长度为 M 的序列 T,问 S 和 T 中 ...

  4. Mysql之DQL------基础查询

    #笔记内容来自于B站尚硅谷教学视频(av49181542)use myemployees; 查询表中的单个字段 SELECT last_name FROM employees; 查询表中的多个字段 # ...

  5. linq to sql any和all的区别

    Any说明:用于判断集合中是否有元素满足某一条件:不延迟.(若条件为空,则集合只要不为空就返回True,否则为False).1.简单形式:仅返回没有订单的客户:var q =from c in db. ...

  6. java_新特性未整理

    得到的.className method.isAnnotationPresent:判断是否有指定的注解,注解.class method.invoke:执行 */}

  7. java笔试之参数解析(正则匹配)

    在命令行输入如下命令: xcopy /s c:\ d:\, 各个参数如下: 参数1:命令字xcopy 参数2:字符串/s 参数3:字符串c:\ 参数4: 字符串d:\ 请编写一个参数解析程序,实现将命 ...

  8. uboot 的移植过程

    1. 工作用户 uboot 2. u­boot 版本 1.1.4 3. 工具链 2.95.3 步骤 我们为开发板取名叫: crane2410, 并在 u­boot 中建立自己的开发板类型 修改 Mak ...

  9. Nand Flash 控制器中的硬件 ECC 介绍

    ECC 产生方法 ECC 是用于对存储器之间传送数据正确进行校验的一种算法,分硬件 ECC 和软件 ECC 算法两种,在 S3C2410 的 Nand Flash 控制器中实现了由硬件电路(ECC 生 ...

  10. 「题解」:07.18NOIP模拟赛T1:星际旅行

    问题 A: 星际旅行 时间限制: 1 Sec  内存限制: 256 MB 题面 题面谢绝公开. 考试心路历程 拿到这道题感觉很懵逼,所以先搞的T2和T3,最后码了个暴力,结果还不如直接输出‘0’得分高 ...