<!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. 数据结构之单链表（golang版）

    线性表之单链表 package main //线性表中的链式存储结构 //第一个节点为头节点,并不真实保存数据,头节点基本代表了整个链表 import ( "fmt" ) type ...

  2. VMware HorizonView虚拟化桌面TLS问题处理

    问题描述 公司虚拟化桌面环境内,进出口事业部同事在使用"中国贸易单一窗口"登录系统时,其系统本地控件无法启动WSS服务,端口显示使用61231,并反复提示安装控件. 排查过程 首先 ...

  3. Design Hit Counter

    Design a hit counter which counts the number of hits received in the past 5 minutes. Each function a ...

  4. 【Python】【demo实验17】【练习实例】【将一个正整数分解质因数】

    题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. 我的源代码: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 ...

  5. Linux-echo:打印彩色输出

    脚本可以使用转义序列在终端中生成彩色文本 文本颜色是由对应的色彩码来描述的.其中包括: 重置=0,黑色=30,红色=31,绿色=32, 黄色=33,蓝色=34,洋红=35,青色=36,白色=37. 要 ...

  6. 什么是时序时空数据库TSDB

    时序时空数据库(Time Series & Spatial Temporal Database,简称 TSDB)是一种高性能.低成本.稳定可靠的在线时序时空数据库服务,提供高效读写.高压缩比存 ...

  7. Stardew Valley(星露谷物语)Mod开发之路 写在前面

    之前迷上了一款新游戏Stardew Valley,这几天发现游戏为插件开发提供了SMAPI编程接口,玩家可以方便的自定义游戏内容(瞬间感觉因缺思厅,额..),其实这几年的游戏许多都有mod机制,商家机 ...

  8. JavaScript - 过滤敏感字符

    目录 before 源码示例 before 本篇博客展示了如何是在前端对铭感字符及一些特殊的命令做过滤. 好处是,少发一次请求,减少服器校验压力. 源码示例 <!DOCTYPE html> ...

  9. Bean属性复制，字段名可不同，字段类型不同需要自行处理

    @Setter @Getter public class SourceA { private String name; private String text; public SourceA(Stri ...

  10. Xshell~工作中访问Linux服务器

    1.下载Xshell 下载地址:https://xshell.en.softonic.com/ 2.安装(无特殊修改,自行安装即可) 3.使用 登录(1.新建->输入主机IP,点击确定-> ...