<!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. Springboot Rabbitmq 使用Jackson2JsonMessageConverter 消息传递后转对象

    Springboot为了应对高并发,接入了消息队列Rabbitmq,第一版验证时使用简单消费队列: //发送端 AbstractOrder order =new Order(); rabbitmqTe ...

  2. [bzoj3043]IncDec Sequence_差分

    IncDec Sequence 题目大意:给定一个长度为n的数列{a1,a2...an},每次可以选择一个区间[l,r],使这个区间内的数都加一或者都减一.问至少需要多少次操作才能使数列中的所有数都一 ...

  3. 使用Docker Maven 插件进行镜像的创建以及上传至私服

    1.在进行服务容器化部署的时候,需要将服务以及其运行的环境整个打包做成一个镜像,打包的过程有两种办法,第一种是首选通过maven打成jar包,然后再编写dockerfile,执行docker buil ...

  4. Redis（1.5）Redis配置文件（4.0.14）

    4.0.14 常用配置 bind 127.0.0.1 # 默认绑定本地,不写的话任何地址都可以访问 protected-mode yes #保护模式,如果没有设置bind 配置地址,也没有设置任何密码 ...

  5. C++中用ODBC和ADO方式连接SQL数据库

    https://wenku.baidu.com/view/f01e4e762f3f5727a5e9856a561252d380eb2033.html

  6. 黑科技——树剖两次dfs转一次dfs！

    黑科技--树剖两次\(dfs\)转一次\(dfs\)! 重所周知,树链剖分通常是要\(dfs​\)两次的,就像这样: int Fa[N],dep[N],Sz[N],son[N]; void dfs1( ...

  7. 二维数组（解引用、指针数组、数组的指针）——C语言

    二维数组 在说二维数组前先来说下一维数组中的指针数组和和数组的指针 一.一维数组中指针数组和数组指针的区别 指针数组: ]; []的优先级比*高,首先它是一个数组,它的大小是5,它里面存放的数据类型是 ...

  8. 安装consul-client+registrator

    安装registrator 下载镜像这里必须要注意:registrator的lastest版本已经2年没更新了,他的最新主板本是master,一定要注意,因为旧的版本无法发现跟自己不是同一个网络的容器 ...

  9. 牛客 109B 好位置 (字符串水题)

    大意: 给定字符串$s1,s2$, 对于$s1$中所有与$s2$相等的子序列$t$, $t$在$s1$中的下标定义为好位置. 求$s1$是否所有位置都是好位置. 显然$s1$的前缀要与$s2$相等, ...

  10. 关于学习电信nb-iot的小结

    关于这几天对nb-iot的学习的总结和遇到的坑 初步学习nb-iot,了解到了nb-iot对于传感器数据传输功能的强大: 废话不多说,对于nb-iot我们选择的有人的模块,选择B5频段也就是电信的nb ...