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?id=10&name=zs">登录</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.query.id}}---{{$route.query.name}}</h1>',
  27.          data(){
  28.            return{
  29.              msg:'123'
  30.            }
  31.          },
  32.          created(){//组件的生命周期
  33.            // console.log(this.$route)
  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.          {path:'/login',component:login},
  46.          {path:'/register',component:register}
  47.          ]
  48.        })
  49.  
  50.            //创建 Vue 实例，得到 ViewModel
  51.            var vm =  new Vue({
  52.                el:'#app',
  53.          data:{
  54.            msg:''
  55.          },
  56.          methods:{},
  57.          //router:router
  58.          router
  59.            });
  60.        </script>
  61.    </body>
  62.  </html>

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

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

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

  2. 第七章 路由 76 路由传参-使用params方式传递路由参数

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

  3. vue-router路由传参之query和params

    首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.pu ...

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

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

  5. vue 路由跳转传参

    <li v-for="article in articles" @click="getDescribe(article.id)"> getDescr ...

  6. vue-router路由如何实现传参

    tip: 用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string) 也可以选用sessionstorage/lo ...

  7. 脚本语言丨Batch入门教程第四章：调用与传参

    今天是Batch入门教程的最后一章内容:调用与传参.相信通过前面的学习,大家已经掌握了Windows Batch有关的基础知识和编程方法,以及利用Windows Batch建立初级的编程思维方式.今后 ...

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

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

  9. js方法用来获取路径传参上所带的参数

    //js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...

随机推荐

  1. Design Circular Queue

    Design your implementation of the circular queue. The circular queue is a linear data structure in w ...

  2. CentoS里Tomcat端口开放

    1.发现安装好tomcat后,发现无法访问tomcat首页,后来发现防火墙没有开放8080端口. 需注意的是:CentOS 7防火墙换用Friewalld了,所以要用以下命令将端口号加进防火墙: fi ...

  3. java：线上问题排查常用手段（转）

    出处:java:线上问题排查常用手段 一.jmap找出占用内存较大的实例 先给个示例代码: import java.util.ArrayList; import java.util.List; imp ...

  4. Web前端开发JavaScript基础

    JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...

  5. Codeforces 1178E. Archaeology

    传送门 首先一定有解,考虑归纳法证明 首先 $n<=3$ 时显然 考虑 $n=4$ 时,那么因为 $s[1]!=s[2],s[3]!=s[4]$ ,并且 $s[i] \in {a,b,c}$ 由 ...

  6. asp.net 5.图片和验证码

    1.基本画图 //给用户创建一张图片,并且保持一张图片. //创建一个画布 , )) { //绘画布创建一个画笔 using (Graphics g = Graphics.FromImage(map) ...

  7. vue.js对列表进行编辑未保存随时变更

    1.不要建立在同一vm对象下 2.使用深拷贝$.extend(true, vm.model, obj); 3.开新标签页

  8. luogu P4688 [Ynoi2016]掉进兔子洞

    luogu 我们要求的答案应该是三个区间长度\(-3*\)在三个区间中都出现过的数个数 先考虑数列中没有相同的数怎么做,那就是对三个区间求交,然后交集大小就是要求的那个个数.现在有相同的数,考虑给区间 ...

  9. [leetcode] 题解记录 11-20

    博客园markdown太烂, 题解详情https://github.com/TangliziGit/leetcode/blob/master/solution/11-20.md Leetcode So ...

  10. Plugin 表格列自定义显示隐藏插件TableCustom.js

    TableCustom 案例展示 下载地址 https://github.com/chaorenzeng/TableCustom.js.git 快速使用 1.引入TableCustom.css和Tab ...