<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible"  content="ie=edge">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

     <script src="../lib/vue-router-3.0.6.js"></script>

   </head>

   <body>

       <div id="app">

       <!-- 如果在路由中，使用查询字符串，给路由传递参数，则 不需要修改 路由规则的path属性 -->

       <router-link to="/login/12/ls">登录</router-link>

       <router-link to="/register">注册</router-link>

       <router-view></router-view>

       </div>

       <script>

       var login={

         template:'<h1>登录 --- {{$route.params.id}} --- {{$route.params.name}}</h1>',

         data(){

           return{

             msg:'123'

           }

         },

         created(){//组件的生命周期

           console.log(this.$route.params.id)

           // console.log(this.$route.query.id)

         }

       }

       var register={

         template:'<h1>注册</h1>'

       }

       var router = new VueRouter({

         routes:[

         //:id，这里的:是占位符

         {path:'/login/:id/:name',component:login},

         {path:'/register',component:register}

         ]

       })

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           msg:''

         },

         methods:{},

         //router:router

         router

           });

       </script>

   </body>

 </html>

第七章 路由 76 路由传参-使用params方式传递路由参数的更多相关文章

  1. 第七章 路由 75 路由传参-使用query方式传递参数

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

  2. Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

    1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...

  3. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  4. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  5. 设置 Ext.data.Store 传参的请求方式

    设置 Ext.data.Store 传参的请求方式 1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var res ...

  6. Extjs 项目中常用的小技巧，也许你用得着(5)--设置 Ext.data.Store 传参的请求方式

    1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var resultsPanel = Ext.create('Ex ...

  7. Shell传参的多种方式

    Shell 传参的多种方式 使用$1 $2 这种类似占位符的方式 # 命令行调用 start.sh 8080 9090 # 脚本中获取 port1=$1 # 8080 port2=$2 # 9090 ...

  8. Tornado学习笔记(二) 路由/post/get传参

    本章我们学习 Tornado 的路由传参等问题 路由 路由的匹配 Tornado的路由匹配采用的是正则匹配 一般情况下不需要多复杂的正则,正则的基本规则如下(站长之家) 举个例子 (r'/sum/(\ ...

  9. ionic简单路由及页面传参

    1)页面跳转及传参方法 angular.module('app.routes', [])//routes路由模型 .config(function($stateProvider, $urlRouter ...

随机推荐

  1. tf.metrics.sparse_average_precision_at_k 和 tf.metrics.precision_at_k的自己理解

    tensorflow最大的问题就是大家都讲算法,不讲解用法,API文档又全是英文的,看起来好吃力,理解又不到位.当然给数学博士看的话,就没问题的. 最近看了一系列非常不错的文章,做一下记录: http ...

  2. Tcpdump移植

    摘要: tcpdump对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析.它支持针对网络层.协议.主机.网络或端口的过滤,并提供and.or.n ...

  3. [转帖]安装prometheus+grafana监控mysql redis kubernetes等

    安装prometheus+grafana监控mysql redis kubernetes等 https://www.cnblogs.com/sfnz/p/6566951.html plug 的模式进行 ...

  4. Java利用模板生成pdf并导出

    1.准备工作 (1)Adobe Acrobat pro软件:用来制作导出模板 (2)itext的jar包 2.开始制作pdf模板 (1)先用word做出模板界面 (2)文件另存为pdf格式文件 (3) ...

  5. ES-基本概念

    目录: 1.  ElasticSearch是什么 2. 基本概念 3. 几个关键词   正文: 1.  ElasticSearch是什么     ElasticSearch是一个基于Lucene的搜索 ...

  6. c++学习笔记之多态和虚函数

    有了虚函数,基类指针指向基类对象时就使用基类的成员(包括成员函数和成员变量),指向派生类对象时就使用派生类的成员.换句话说,基类指针可以按照基类的方式来做事,也可以按照派生类的方式来做事,它有多种形态 ...

  7. Linux就该这么学——新手必须掌握的命令之打包压缩与搜索命令组

    tar命令 用途 : 对文件进行打包或者解压 格式 : tar [选项] [文件] 表 tar命令的参数及作用 参数 作用 -c 创建压缩文件 -x 解开压缩文件 -t 查看压缩包内有哪些文件 -z ...

  8. MouseMoveEvent为了不太耗资源在默认状态下是要鼠标按下才能捕捉到。要想鼠标不按下时的移动也能捕捉到，需要setMouseTracking(true)

    最近用Qt软件界面,需要用到mouseMoveEvent,研究了下,发现些问题,分享一下. 在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent,但是MouseMoveEvent为了不太耗资 ...

  9. .Net面试题二

    谈谈创建线程的方式 1.列举.Net页面之间传值的方式 2..Net中aspx页面从客户端浏览器开始请求到服务器返回响应所经历的过程 CLR主要运行过程 ASP.NET运行管道所有事件 3.如何理解委 ...

  10. 版本控制工具SVN学习

    教学视频链接:https://edu.aliyun.com/course/83?spm=5176.10731334.0.0.778e6580zC0Ri0 版本控制工具SVN学习 1,SVN的简介 在实 ...