<!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. 必备java参考资源列表

    现在开始正式介绍这些参考资源. Web 站点和开发人员 Web 门户 网络无疑改变了共享资源和出版的本质(对我也是一样:您正在网络上阅读这篇文章),因此,从每位 Java 开发人员都应该关注的关键 W ...

  2. Chart.js docs

    原文链接:http://www.bootcss.com/p/chart.js/docs/ 引入Chart.js文件 首先我们需要在页面中引入Chart.js文件.此工具库在全局命名空间中定义了Char ...

  3. H5的localStorage简单存储删除

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 双系统xp和ubuntu，删除ubuntu

    1:下载MbrFix.exe 2:进入c盘,命令MbrFix /drive 0 fixmbr

  5. 实现静默安装APK的方法

    需要满足的条件: 内置到ROM.即APK包的安装位置是/system/app下. 下面以 test.apk 为例,演示这个操作.需要准备一台已经获得 Root 权限的手机. 1.通过 USB 连接手机 ...

  6. gcc编译系统

    一. C语言编译过程 C语言的编译过程可分为四个阶段: 1.预处理(Preprocessing) 对源程序中的伪指令(即以#开头的指令)和特殊符号进行处理的过程. 伪指令包括:1)宏定义指令: 2)条 ...

  7. webpack -v显示的版本与package.json的devDependencies节点显示的webpack版本不一致的问题

    最近在学习webpack,遇到个奇葩的问题.就是安装完成webpack后,查看安装的webpack版本与package.json中显示的版本不一致, webpack是局部安装的,非全局安装, 命令1: ...

  8. ThinkPHP3.2.3学习笔记3---视图

    一.说明 每个模块的模板文件是独立的,为了对模板文件更加有效的管理,ThinkPHP对模板文件进行目录划分,默认的模板文件定义规则是:视图目录/[模板主题/]控制器名/操作名+模板后缀 默认的视图目录 ...

  9. 爬虫—Selenium爬取JD商品信息

    一,抓取分析 本次目标是爬取京东商品信息,包括商品的图片,名称,价格,评价人数,店铺名称.抓取入口就是京东的搜索页面,这个链接可以通过直接构造参数访问https://search.jd.com/Sea ...

  10. CF670C Cinema 【离散化+map】

    题意翻译 莫斯科在举办一场重要的有 nn 个不同国家的珂学家参与的国际会议,每个珂学家都只会一种语言.为了方便起见,我们规定一种语言用 11 到 10^9109 的数来描述. 在会议之后的晚上,珂学家 ...