Vue 路由规则--传参数
1,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>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head> <body>
<div id="app">
<!-- 如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性 -->
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link to="/register?abc=123">注册</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)
//这里用query去获取路由传来的参数 注意要带上
console.log(this.$route.query.id)
console.log(this.$route.query.name)
}
} var register = {
template: '<h1>注册</h1>',
created(){
console.log(this.$route.query.abc)
}
} var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
}) // 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// 属性名跟属性值一样 只需要写一个名称
// router: router
router
});
</script>
</body> </html>
2,params的方法去获取参数
<!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>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head> <body>
<div id="app"> <!-- 如果在路由中,根据路由的规则的参数去传参 -->
<router-link to="/login/12/ls">登录</router-link>
<router-link to="/register/我是参数">注册</router-link> <router-view></router-view> </div> <script> var login = {
template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
data(){
return {
msg: '123'
}
},
created(){ // 组件的生命周期钩子函数
// 用params去获取参数
console.log(this.$route.params.id)
}
} var register = {
template: '<h1>注册 --{{ $route.params.a}}</h1>',
created(){ // 组件的生命周期钩子函数
// 用params去获取参数
console.log(this.$route.params.a)
}
} var router = new VueRouter({
routes: [
// 在路由规则中用 :形参 去设置传值的参数
{ path: '/login/:id/:name', component: login },
{ path: '/register/:a', component: register }
]
}) // 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router
});
</script>
</body> </html>
Vue 路由规则--传参数的更多相关文章
- Vue路由规则中定义参数
Vue使用routerLinke定义参数的时候 路由规则中不需要更改任何属性. 路由其实就是我们在html中定义的锚点,点击这个连接跳转一个锚点.vue中的路由也是这个原理, 前提是路由必须创建在实 ...
- vue 路由动态传参 (多个)
动态传参 传值页面 客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面 客户详情CustomerDetails.vue 通过this.$router.para ...
- vue使用resource传参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...
- Vue axios post 传参数,后台接收不到为 null
由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端未必能正常获取到,所以在发送之前,需要使用qs模块对其进行处理. cnmp inst ...
- Flask学习 2修改路由规则 传入参数访问url
#!/usr/bin/env python # encoding: utf-8 """ @version: v1.0 @author: cxa @file: flask0 ...
- vue 路由 URL传参
源码如下: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //全局使用该组件 const ro ...
- Vue路由query传参
1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...
- MVC之路由规则 (自定义,约束,debug)
自定义路由规则的要求,小范围写在前,大范围写在后.路由规则可以注册多条,路由规则的名称不能重复路由规则有顺序,并且按照顺序进行匹配,建议小范围写在前,大范围写在后.路由规则可以设置约束 即正则表达式路 ...
随机推荐
- Android中使用ormlite实现持久化--HelloOrmLite
Android中内置了sqlite,但是常用的开发语言java是面向对象的,而数据库是关系型的,二者之间的转化每次都很麻烦(主要是我对sql语言不熟悉).而Java Web开发中有很多orm框架,但是 ...
- python变量、变量属性
1.简述执行Python程序的两种方式以及他们的优缺点 答:交互型优点:马上就能看到结果,排错方便.交互型缺点:代码无法保存,断电即消失 命令型优点:代码永久保存.命令型缺点:不易排错 2.简述Pyt ...
- 设置程序PrivatePath,配置引用程序集的路径(分离exe和dll)
原文:设置程序PrivatePath,配置引用程序集的路径(分离exe和dll) 有时候我们想让程序的exe文件和dll文件分开在不同目录,这时候可以有3种方法 1.在app.config中配置 &l ...
- Vue. 之 npm安装Element
Vue. 之 npm安装Element 前提: 相关运行环境以搭建完成,例如:Node.Npm等. 假如我的项目目录如下: D:\DISK WORKSPACE\VSCODE\CDS\cds-ap ...
- 使用web-component搭建企业级组件库
组件库的现状 前端目前比较主流的框架有react,vuejs,angular等. 我们通常去搭建组件库的时候都是基于某一种框架去搭建,比如ant-design是基于react搭建的UI组件库,而ele ...
- Directx11教程(14) D3D11管线(3)
原文:Directx11教程(14) D3D11管线(3) 现在我们开始学习一些CP(command processor)的知识.参考资料: http://fgiesen.wordpres ...
- iOS 9适配
iOS 9系统策略更新,请开发者注意升级 近期苹果公司iOS 9系统策略更新,限制了http协议的访问,此外应用需要在“Info.plist”中将要使用的URL Schemes列为白名单,才可正常检查 ...
- dba和表的备份与恢复
每个oracle数据库应该至少有一名数据库管理员(dba),对于一个小的数据库,一个dba就够了,但是对于一个大的数据库可能需要多个dba分别担负不同的管理职责.那么一个数据库管理员的主要工作是什么呢 ...
- 2015全球商业地产商影响力排行TOP10:中国占据5个
2015全球商业地产商影响力排行TOP10:中国占据5个 1.西蒙丨依然最有影响力 发展概况:西蒙公司是北美商业地产(专题阅读)的王者,美最大商业地产REITS,1960年最初只以开发为主,1993年 ...
- 在哈尔滨的寒风中EOJ 3461【组合数学】
http://acm.ecnu.edu.cn/problem/3461/ 还是能力不够,不能看出来棋盘足够大时,马是可以到达任何位置的.还是直接看题解怎么说的吧:(http://acm.ecnu.ed ...