<!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?id=10&name=zs">登录</router-link>

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

       <router-view></router-view>

       </div>

       <script>

       var login={

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

         data(){

           return{

             msg:'123'

           }

         },

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

           // console.log(this.$route)

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

         }

       }

       var register={

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

       }

       var router = new VueRouter({

         routes:[

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

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

         ]

       })

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           msg:''

         },

         methods:{},

         //router:router

         router

           });

       </script>

   </body>

 </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. USACO4.4 Shuttle Puzzle【bfs+优化】

    直接上$bfs$,每一个状态记录下当前字符串的样子,空格的位置,和走到这个状态的答案. 用空格的位置转移,只有$50pts$ 考虑到题目一个性质:$W$只往右走,$B$只往左走,就可以过了. #inc ...

  2. 【miscellaneous】单播、广播和多播IP地址

    转自:http://www.cnblogs.com/gaoxing/archive/2012/02/19/2358484.html 除地址类别外,还可根据传输的消息特征将IP地址分为单播.广播或多播. ...

  3. PHP学习（6）——代码重用与函数编写的一些注意事项

    一个新的项目是这样创建的:它将已有的可重新利用的组件进行组合,并将新的开发难度降低到最小. 代码重用的好处:降低成本.提升可靠性和一致性. 1.使用require()和include()函数 使用一条 ...

  4. nRF5 SDK Bootloader and DFU moudles(3)

    DFU控制点特性用于控制DFU过程的状态. 通过写入该特征来请求所有DFU程序. 标记过程结束的响应将作为通知收到. BLE传输 Transfer of an init packet DFU控制器首先 ...

  5. flask LOCAL线程隔离技术

    from threading import Thread from werkzeug.local import Local local = Local()#实例化一个线程隔离对象 request = ...

  6. 企业场景-网站目录安全权限深度讲解及umask知识

    站点目录的文件和目录给什么权限: 默认权限是安全权限的临界点,工作中尽量给这个临界点,或者小于临界点,不要大于临界点权限. 默认权限分配的命令 umask 在linux下文件的默认权限是由umask值 ...

  7. Linux命令---ln、readlink

    ln 无参数--------创建硬链接 -s  -------------创建软链接 用法:ln  [option]  源文件  目标文件 ln test.txt test_hard.txt 只有在同 ...

  8. P2709 小B的询问 【普通莫队】

    这是我的莫队入门题,我也了解到了莫队分为普通莫队以及带修莫队.顾名思义,普通莫队不需要修改区间的值,而带修莫队处理区间的值会修改的查询. 能用莫队的前提条件: 1.在知道 [l, r]中信息时,可以在 ...

  9. git链接远程库

    码云版本库使用流程 生成公钥 ssh-keygen -t rsa -c "码云申请邮箱" 添加公钥到本地 ssh-agent bash ssh-add ~/.ssh/id_rsa ...

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

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