第七章 路由 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 ...
随机推荐
- 一篇学习完rabbitmq基础知识，springboot整合rabbitmq
一 rabbitmq 介绍 MQ全称为Message Queue,即消息队列, RabbitMQ是由erlang语言开发,基于AMQP(Advanced MessageQueue 高级消息队列协议 ...
- Element-UI 框架 el-scrollbar 组件
Element-UI 框架 el-scrollbar 组件:https://juejin.im/post/5c83d5ac5188257e1c4dc9e7
- 基于模板匹配的目标跟踪（OpenCV）
基于VS2010+ OpenCV2.代码可以读入视频,也可以读摄像头,两者的选择只需要在代码中稍微修改即可.对于视频来说,运行会先显示第一帧,然后我们用鼠标框选要跟踪的目标,然后跟踪器开始跟踪每一帧. ...
- AirFlow功能展示个人笔记
DAGs 查看您可以一目了然地查看成功.失败及当前正在运行的任务数量. 选中其中一个DAG 树视图 跨越时间的 DAG 的树表示.如果 pipeline(管道)延迟了,您可以很快地看到哪里出现了错误的 ...
- Remainder Problem（分块） Educational Codeforces Round 71 (Rated for Div. 2)
引用:https://blog.csdn.net/qq_41879343/article/details/100565031 下面代码写错了,注意要上面这种.查:2 800 0,下面代码就错了. ...
- Photon Server初识(一) ---C#链接MySql
环境: 1.MAC电脑,JetBrains Rider编辑器 2.本地MySql5.7 (开始安装8.1发现使用 NHibernate 映射链接不上) 一.新建工程 二.引入dll包(MySQL.Da ...
- Linux就该这么学——新手必须掌握的命令之系统状态检测命令组
ifconfig命令 用途 : 获取网卡配置与网络状态等信息 格式 : ifconfig[网络设备][参数] 其实主要查看的就是网卡名称,inet参数后面的IP地址,ether参数后面的网卡物理地址( ...
- python基础知识0-4
collection 他是对字典 元组 集合 进行加工的 是计数器 无论 深 ,浅 ,赋值 拷贝 内存地址都不变 赋值也是拷贝的一种 拷贝分两类数字 字符串 另一类: 列表 字典 元组 这一类还分两 ...
- nginx+keepalived高可用
准备工作: yum install -y gcc openssl-devel pcre-devel install iptables-services setenforce 0 sed -ri 's/ ...
- 并不对劲的复健训练-CF1205B Shortest Cycle
题目大意 有\(n\)(\(n\leq 10^5\))个数\(a_1,...,a_n\)(\(a\leq 10^{18}\)).有一个图用这个方法生成:若\(a_i\)按位与\(a_j\)不为0,则在 ...