1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.    <head>
  5.      <meta charset="utf-8">
  6.      <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible"  content="ie=edge">
  8.      <title>Document</title>
  9.      <!--1.导入Vue的包-->
  10.      <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
  11.      <script src="../lib/vue-router-3.0.6.js"></script>
  12.    </head>
  13.  
  14.    <body>
  15.        <div id="app">
  16.        <!-- 如果在路由中，使用查询字符串，给路由传递参数，则 不需要修改 路由规则的path属性 -->
  17.        <router-link to="/login/12/ls">登录</router-link>
  18.        <router-link to="/register">注册</router-link>
  19.  
  20.        <router-view></router-view>
  21.        </div>
  22.  
  23.        <script>
  24.  
  25.        var login={
  26.          template:'<h1>登录 --- {{$route.params.id}} --- {{$route.params.name}}</h1>',
  27.          data(){
  28.            return{
  29.              msg:'123'
  30.            }
  31.          },
  32.          created(){//组件的生命周期
  33.            console.log(this.$route.params.id)
  34.            // console.log(this.$route.query.id)
  35.  
  36.          }
  37.        }
  38.  
  39.        var register={
  40.          template:'<h1>注册</h1>'
  41.        }
  42.  
  43.        var router = new VueRouter({
  44.          routes:[
  45.          //:id，这里的:是占位符
  46.          {path:'/login/:id/:name',component:login},
  47.          {path:'/register',component:register}
  48.          ]
  49.        })
  50.  
  51.            //创建 Vue 实例，得到 ViewModel
  52.            var vm =  new Vue({
  53.                el:'#app',
  54.          data:{
  55.            msg:''
  56.          },
  57.          methods:{},
  58.          //router:router
  59.          router
  60.            });
  61.        </script>
  62.    </body>
  63.  </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. 【并行计算-CUDA开发】GPU---并行计算利器

    1 GPU是什么 如图1所示,这台PC机与普通PC机不同的是这里插了7张显卡,左下角是显卡,在中间的就是GPU芯片.显卡的处理器称为图形处理器(GPU),它是显卡的"心脏",与CP ...

  2. mysql数据库之视图、触发器

    视图 概念:通过查询得到的一张虚拟表,然后保存下来就是视图 视图的好处:如果要频繁使用某张虚拟表,那么就可以保存为视图,以后查找就直接拿这个视图就会非常方便 视图语法规则: create view t ...

  3. pynput模块—键盘鼠标操作和监听

    pynput.mouse:包含控制和监控鼠标或者触摸板的类. pynput.keyboard:包含控制和监控键盘的类. 上面提到的子包都已被引入到pynput库中.要使用上面的子包,从pynput中引 ...

  4. jdk1.8 -- stream 的使用

    一.stream介绍 stream 是jdk 一个加强的api操作,翻译过来就是流的意思,主要是对Collection 集合的一些操作,流一但生成就会有方向性,类似于自来水管的水流一样,不可以重复使用 ...

  5. C语言一行太长的换行处理

    转载:https://blog.csdn.net/baiqishijkh/article/details/79236202 在C语言程序编写中,我们有时会遇到一行代码太长而影响阅读或者出现与部分公司或 ...

  6. python 2 和 python 3的区别

    python2和python3区别 ​ python2:源码不统一,源码(功能)重复,维护困难,除法的时候返回来的是小数点,()浮点数 ​ python3:源码统一,源码不重复,除法的时候返回来的是整 ...

  7. 【转载】Python第三方库资源

    转自:https://weibo.com/ttarticle/p/show?id=2309404129469920071093 参考:https://github.com/jobbole/awesom ...

  8. LeetCode 160——相交链表（JAVA）

    编写一个程序,找到两个单链表相交的起始节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 1: 输入:intersectVal = 8, listA = [4,1,8,4,5], listB ...

  9. Redis主从及哨兵

    Redis主从用法 像MySQL一样,redis是支持主从同步的,而且也支持一主多从以及多级从结构. 主从结构,一是为了纯粹的冗余备份,二是为了提升读性能,比如很消耗性能的SORT就可以由从服务器来承 ...

  10. JavaScript的几种循环方式

    JavaScript提供了许多通过LOOPS迭代的方法.本教程解释了现代JAVASCRIPT中各种各样的循环可能性 目录: for forEach do...while while for...in ...