<!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. vs2017安装过程中下载不动的一种情况

    第一种可能:微软可能有不同的下载地址,某些地址下载速度快,某些慢.这种情况下,禁用连接,再启用.有几率速度飞速上升. 第二种可能:由于总所周知的原因,连接不了Google.但是如果需要下载Androi ...

  2. Linux下将用户添加到sudoers中

    Linux默认是没有将用户添加到sudoers列表中的,需要root手动将账户添加到sudoers列表中,才能让普通账户执行sudo命令. root 账户键入visudo即可进入sudo配置,这个命令 ...

  3. nginx多线程高并发

    直接上图 Master-Worker模式 1.Nginx 在启动后,会有一个 master 进程和多个相互独立的 worker 进程. 2.接收来自外界的信号,向各worker进程发送信号,每个进程都 ...

  4. gdb移植（设备端本地版本）

    Gdb下载地址:http://ftp.gnu.org/gnu/gdb/ ncurse下载地址:http://ftp.gnu.org/pub/gnu/ncurses/ 目录结构如下: ├── insta ...

  5. python 下安装pymysql数据库

    两种方法来安装pymysql 方法一.利用命令来安装 安装:python37 -m pip install pymysql 升级:python37 -m pip install pymysql --u ...

  6. table+ajax加载数据

    //ajax加载notice $(function() { //${pageContext.request.contextPath}/ /** var res = [ {noticeTitle:'必答 ...

  7. ASP.NET练习③——AspNetChosmePager

    aspx代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="_Chosm ...

  8. 牛客 158F 青蛙 (贪心)

    显然存在一个最优解满足所有青蛙在连续的一段, 每次由最左侧青蛙跳向下一格. 然后二分或者双指针即可求出答案. #include <iostream> #include <sstrea ...

  9. Winform 5种皮肤小结（内含丰富的下载实例）

    软件界面就是指软件中面向操作者而专门设计的用于操作使用及反馈信息的指令部分. 优秀的软件界面有简便易用,突出重点,容错高等特点. 1.东日IrisSkin  使用IrisSkin只能是对单一的控件重绘 ...

  10. BZOJ2659算不出的算式不正经题解

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=2659 分析 难得做到此类打表题目,不觉回想到NOIp2017考场上的SB经历 这道题看到 ...