<!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. 超过经理收入的员工 表的自JOIN

    https://leetcode-cn.com/problems/employees-earning-more-than-their-managers/description/ The Employe ...

  2. CMMI Institute Conference 2014中国大会

    我在大会上做SPD(Strategic Policy Deployment战略部署策略)的演讲,和来自各个公司的高管进行了热烈的讨论.获得好评. 有兴趣的朋友能够点击下面链接:Stratehttp:/ ...

  3. mysql05---游标

    drop procedure p12$ //删除存储过程 //游标cursor,一条sql对应n条资源,取出资源的接口/句柄就是cursor, 一条sql产生的n条结果不是一次性全部输出,而是返回一个 ...

  4. Ubuntu如何定时清理内存

    Ubuntu如何定时清理内存 1.进入su jiqing@Ubuntu:~$ su 密码: root@Ubuntu:/home/jiqing# 2.创建cleanCache.sh #!/bin/bas ...

  5. jsp实现翻页功能

    jsp实现翻页功能 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给 ...

  6. 基于COCHONUT做和弦识别

    论文为:COCHONUT: Recognizing Complex Chords From MIDI Guitar Sequences 出处:international symposium/confe ...

  7. bzoj1138

    dp+spfa优化 最朴素的dp是dp[i][j]表示i->j的最短路,然后把所有pair(i,i)放到队列里跑spfa,但是这样被卡掉了,那么我们要优化一下 问题在于每次我们转移的时候要枚举i ...

  8. context:property-placeholder作用

    原文地址:http://blog.sina.com.cn/s/blog_a0de59cf0101dqeb.html spring去加载,这个元素的写法如下: <context:property- ...

  9. python3.6 + selenium2.53.1 查询数据库并将返回的内容中每一行的内容转换成class对象

    环境: win10 python3.6 selenium2.53.1 准备工作:先安装pymysql python2.x链接数据库使用MySQLdb,而python3.x链接数据库使用pymysql ...

  10. bzoj 3732: Network【克鲁斯卡尔+树链剖分】

    先做最小生成树,这样就保证了最大值最小 然后随便用个什么东西维护一下最大值,我用的树剖log^2,倍增会更快 #include<iostream> #include<cstdio&g ...