第七章 路由 75 路由传参-使用query方式传递参数
<!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方式传递参数的更多相关文章
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- 第七章 路由 76 路由传参-使用params方式传递路由参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue-router路由传参之query和params
首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.pu ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- vue 路由跳转传参
<li v-for="article in articles" @click="getDescribe(article.id)"> getDescr ...
- vue-router路由如何实现传参
tip: 用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string) 也可以选用sessionstorage/lo ...
- 脚本语言丨Batch入门教程第四章：调用与传参
今天是Batch入门教程的最后一章内容:调用与传参.相信通过前面的学习,大家已经掌握了Windows Batch有关的基础知识和编程方法,以及利用Windows Batch建立初级的编程思维方式.今后 ...
- 设置 Ext.data.Store 传参的请求方式
设置 Ext.data.Store 传参的请求方式 1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var res ...
- js方法用来获取路径传参上所带的参数
//js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...
随机推荐
- AspxGridView 弹框选择器 JS
function Dictionary() { this.data = new Array(); this.put = function (key, value) { this.data[key] = ...
- 在Linux虚拟机里开启Apache服务
首先第一步我们配置环境:把yum与Linux ping通 1.我们来下载apache服务,输入:yum install httpd * 2.安装完毕之后默认是死的,要给他启动一下,输入命令:syste ...
- vi去掉^M
Windows下编辑的文本文件or程序文件,拷贝到linux下,用vi打开时,有时候会看到每行末尾有个 ^M 的符号. 这里介绍一个可以快速去除^M符号的方法: 用vi编辑器打开该文件,然后输入: : ...
- Design Log Storage System
You are given several logs that each log contains a unique id and timestamp. Timestamp is a string t ...
- 【LOJ】#3086. 「GXOI / GZOI2019」逼死强迫症
LOJ#3086. 「GXOI / GZOI2019」逼死强迫症 这个就是设状态为\(S,j\)表示轮廓线为\(S\),然后用的1×1个数为j 列出矩阵转移 这样会算重两个边相邻的,只要算出斐波那契数 ...
- TCP的组包、半包、粘包与分包
一.概念 1)组包.简单的说就是tcp协议把过大的数据包分成了几个小的包传输,接收方要把同一组的数据包重新组合成一个完整的数据包. 2)半包.指接受方没有接受到一个完整的包,只接受了部分,这种情况主要 ...
- spark算子篇-repartition and coalesce
我们知道 RDD 是分区的,但有时候我们需要重新设置分区数量,增大还是减少需要结合实际场景,还有可以通过设置 RDD 分区数来指定生成的文件的数量 重新分区有两种方法:repartition and ...
- LKM rootkit：Reptile学习
简介 Reptile是github上一个很火的linux lkm rootkit,最近学习了一些linux rootkit的内容,在这里记录一下. 主要是分析reptile的实现 Reptile的使用 ...
- [POI2012]ROZ-Fibonacci Representation (贪心)
大意: 给定数$n$, 求将$n$划分为最少的斐波那契数的和或差. 每次取相邻$n$的斐波那契数一定最优, 考虑证明. 结论1:存在一个最优解,使得每个斐波那契数使用不超过1次.(考虑$2F_n=F_ ...
- 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?
首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...