<!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. ubuntu安装jdk 1.6

    linux下安装JDK1.6 1. 去http://java.sun.com/j2se/1.4.2/download.html 下载一个Linux Platform的JDK,建议下载RPM自解压格式的 ...

  2. Oracle - 数据更新 - 增删改

    /* 数据的更新 增加 删除 修改 */ -----------------------------------增加(一次只能插入一条数据) --自定义插入数据列的顺序 ,,); --按照数据库默认的 ...

  3. Lightoj 1024 - Eid

    求n个数的最小公倍数. import java.math.*; import java.io.*; import java.util.*; import java.text.*; public cla ...

  4. ubuntu1.8安装lnmp失败

    兴致冲冲的安装好ubuntu1.8. 想安装lnmp,结果失败,失败,失败. 一遍由一遍,很痛苦. 每一遍都要半个小时,甚至更久. 等来的就是失败. 看日志也看不出头绪来. ============= ...

  5. jQuery - AJAX 级联变动

    此篇文章主要是用来记忆使用JQUERY+AJAX技术实现 二级级联变动 : 当第一个下拉框变动时,第二个下拉列表框中也将会随之变动. JSP: ---------------------------- ...

  6. Masonry基本用法

    使用步骤: 1.导入框架 2.导入头文件,或者直接导入.pch文件中 //省略前缀 'max_'的宏: #define MAS_SHORTHAND // 自动装箱:自动把基本数据类型转化成对象,int ...

  7. JSOI2010 联通数

    传送门 这道题的题目描述看起来很奇怪.实际上的意思是要求在这个有向图之内能到达的点对有多少,解释一下题里的图片就是(1,1),(1,2),(1,3),(1,4),(1,5),(2,2),(2,3),( ...

  8. jsp 中href链接有前缀

    在jsp页面中,如果有一个链接写为:“href="www.hqvolunteer.org"”(链接到的是外网),这样发布项目了后,把鼠标移到上面显示的是:你的项目路径/www.hq ...

  9. SDK介绍

    软件开发工具包(外语首字母缩写:SDK.外语全称:Software Development Kit)一般都是一些软件工程师为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件时的开发工具的集合. ...

  10. 'ALTER TABLE SWITCH' 语句失败。表'MGXXX.dbo.user_XXX' 已分区，但 索引'ix_user_XXX_user_id' 未分区。

    问题描述: 今天在做分区切换的时候把旧log数据切到clear表,遇到了这个问题,顺便做下笔记记录一下解决方法 'ALTER TABLE SWITCH' 语句失败.表'MGXXX.dbo.user_X ...