<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../vue2.2.js"></script>

        <script src="../vue-router2.1.js"></script>

    </head>

    <body>

        <div id="app">

            <p>

                <router-link to="/user/01">QQ登录</router-link>

                <router-link to="/user/02">微信登录</router-link>

            </p>

            <router-view></router-view>

        </div>

        <script>

            /*一个路径参数使用冒号:标记.当匹配到一个路由时,参数值会被设置到this.$route.params,

                    可以在每个组件内使用.于是,我们可以更新User模板,输出当前的Id*/

            var User = {

                template: `<div>User {{$route.params.id}}</div>`

            }

            const router = new VueRouter({

                routes: [{

                    path: "/user/:id",

                    component: User

                }]

            })

            const vm = new Vue({

                router //router:router

            }).$mount("#app")

        </script>

    </body>

</html>

vue2.0 路由传参（router-link传过去）的更多相关文章

  1. vue2.0路由（跳转和传参）经典介绍

    声明式 <router-link :to="...">编程式router.push(...) router.push('home')                 / ...

  2. vue2.0路由写法、传参和嵌套

    前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...

  3. vue2.0路由

    现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...

  4. Apache ab测试工具使用方法（无参、get传参、post传参）(转)

    转自Apache ab测试工具使用方法(无参.get传参.post传参) Ab测试工具是apache自带的测试工具,具有简单易上手的特性,下面我总结一下我的使用方法,首先去官方下载apache程序包, ...

  5. python中函数的参数：必传参数（位置参数）、默认值参数、参数组传参、关键字传参

    1.必传参数也叫做位置参数,因为必填,也必须对应位置 2.默认值参数如上图的word 3.参数组参数:传进去的是0个.或多个value的形式,,,和位置参数有点像,只传value值,但是没有限制个数 ...

  6. SpringCloud：feign对象传参和普通传参及遇到的坑

    对象传参: #使用@RequestBody来指定传参对象 @RequestMapping(value = "/v2/matterCode/genCode", method = Re ...

  7. [ 随手记6 ] C/C++ 形参、实参、按值传参、指针传参、引用传参

    个人原创: 1. 形参:形式上的参数,一般多在函数声明.函数定义的参数上: 2. 实参:实体参数,有实际的值,在运算上被循环使用的值: 3. 按值传参:按值,就是把实际的值传给函数内部: 4. 指针传 ...

  8. Java传参都是传引用变量的副本

    最近做练习时碰到一个问题,Java到底是怎样传参的,经过查资料与实验,我发现Java传参都是传引用变量的副本值. 1 Java中的引用变量 1.1 字面值引用变量:即基本数据类型的引用变量 ,如 in ...

  9. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

  10. vue2.0路由-路由嵌套

    vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...

随机推荐

  1. YTU 1008: 童年生活二三事

    1008: 童年生活二三事 时间限制: 1000 Sec  内存限制: 64 MB 提交: 842  解决: 592 题目描述 Redraiment小时候走路喜欢蹦蹦跳跳,他最喜欢在楼梯上跳来跳去. ...

  2. I.MX6 ifconfig: SIOCSIFHWADDR: Cannot assign requested address

    /************************************************************************** * I.MX6 ifconfig: SIOCSI ...

  3. python3中urllib的基本使用

    urllib 在python3中,urllib和urllib2进行了合并,现在只有一个urllib模块,urllib和urllib2的中的内容整合进了urllib.request,urlparse整合 ...

  4. HashMap最大容量为什么是2的32次方

    123456观察jdk中HashMap的源码,我们知道极限值为2的31次方. void resize(int newCapacity) { Entry[] oldTable = table; int ...

  5. bzoj 2169 连边 —— DP+容斥

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2169 就和这篇博客说的一样:https://blog.csdn.net/WerKeyTom_ ...

  6. openpyxl操作excel

    [转] openpyxl库可以读写xlsx格式的文件,对于xls旧格式的文件只能用xlrd读,xlwt写来完成了. python有很多模块都是用来操作excel的,比如xlrd,xlwt,pyExce ...

  7. Java-Runoob-高级教程-实例-字符串：07. Java 实例 - 字符串分割

    ylbtech-Java-Runoob-高级教程-实例-字符串:07. Java 实例 - 字符串分割 1.返回顶部 1. Java 实例 - 字符串分割  Java 实例 以下实例使用了 split ...

  8. Java 支持JavaScript脚本计算

    Java支持了JavaScript脚本的执行计算能力: import javax.script.Invocable; import javax.script.ScriptEngine; import ...

  9. OSI模型与TCP/IP模型基础

    一.OSI七层模型 OSI(Open System Interconnection),OSI是一个开放性的通行系统互连参考模型,是一个协议规范.OSI七层模型是一种框架性的设计方法 ,建立七层模型的主 ...

  10. HDU2262;Where is the canteen(高斯消元+期望)

    传送门 题意 给出一张图,LL从一个点等概率走到上下左右位置,询问LL从宿舍走到餐厅的步数期望 分析 该题是一道高斯消元+期望的题目 难点在于构造矩阵,我们发现以下结论 设某点走到餐厅的期望为Ek 1 ...