Vue路由获取路由参数
vue路由设置路由参数有2种方式：
1.通过query配置：
<router-link :to="{ name:'login',query:{id:1} }">登录</router-link>
通过query配置的路径显示如下：
2.通过params配置：
<router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>
通过query配置的路径显示如下：
通过该方法配置的参数，需要在配置路由的时候给参数留个坑，如下图：
获取路由参数的方法：
1.通过query配置的：
this.$route.query
2.通过params配置的：
this.$route.params
相关代码：
<!DOCTYPE html>
<html lang="en"> <head>
<title>路由参数</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app">
</div>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
var Login = {
template:`<div>我是登录页面</div>`,
created() {
console.log(this.$route.query)
}, } var Register = {
template:`<div>我是注册页面</div>`,
created() {
console.log(this.$route.params)
},
} Vue.use(VueRouter); var router = new VueRouter({
routes:[
{name:'login',path:'/login',component:Login},
//通过params传递的路由参数需要用 :参数名 来占个坑
{name:'register',path:'/register/:name',component:Register}
]
}); var App = {
template:`
<div>
<router-link :to="{ name:'login',query:{id:1} }">登录</router-link>
<router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>
<router-view></router-view>
</div>
`
} var vm = new Vue({
el: '#app',
router:router,
components: {
app:App
},
template:`<app></app>`
});
</script> </body> </html>
补充说明：
$route:路由信息对象，只读对象；
$router:路由操作对象 ，只写对象。
Vue路由获取路由参数的更多相关文章
- vue项目获取地址栏参数（非路由传参）
在项目中,遇到一个需求,就是另一个系统直接跳转到我们项目中的某个页面,不需要做用户的校验直接单纯的跳转新页面,再初始化查询数据,参数以地址栏的形式传入 由于原来项目做过权限控制,所以在路由那边需要进行 ...
- vue不通过路由直接获取url中参数的方法示例
vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...
- vue获取路由中的值
vue中获取路由中的值 在vue中如何获取路由中的值呢?大家先看下面这段代码: this.$route.params && this.$route.params.id 这行代码就是在v ...
- vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面
vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...
- vue获取浏览器地址栏参数(?及/)路由+非路由实现方式
1.? 参数 浏览器参数形式:http://javam4.com/m4detail?id=1322914793170014208 1.1.路由取参方式 this.$route.query.id 前端跳 ...
- vue项目获取当前地址栏参数（非路由传参）
项目中遇到一个需求,就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面,后再初始化查询数据,参数以地址栏的形式传入 管理系统:打开新地址地址 let obj = { id: 21, ...
- vue获取路由地址栏url里面的指定参数
this.$route.query.gid //gid是获取指定参数的名字
- Vue 路由规则--传参数
1,query方法去获取参数 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue中的路由的跳转的参数
vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...
随机推荐
- 如何获取 XAML 控件的模板代码
有时候 .NET 自带提供的控件并不能满足我们的实际需求,需要进行修改,或者参考代码来建立新的控件. 可以在编辑器的文档大纲窗口中,找到所需的对象,然后在其上点右键,编辑模板,编辑副本 弹出创建 St ...
- 91平台iOS接入demo
源码:http://pan.baidu.com/s/1DuBl6 今天整理硬盘,找到了一个有趣的demo.一年前,91助手游戏联运呈爆棚趋势,但是许多使用FlashAir开发的优秀的游戏和应用都卡在了 ...
- PCIe简介及引脚定义
参考文章:http://www.2cto.com/os/201607/523581.html http://blog.csdn.net/michaelcao1980/article/details/4 ...
- UITableView当数据很少的时候，去掉多余的cell分割线
转自:http://www.cnblogs.com/bucengyongyou/archive/2012/10/15/2723814.html 在tableView初始化的时候 UIView *v = ...
- LeetCode263——Ugly Number
Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers ...
- 深度学习领域的Papers
https://github.com/songrotek/Deep-Learning-Papers-Reading-Roadmap 深度学习论文阅读路线图 Deep Learning Papers R ...
- TimescaleDB比拼InfluxDB：如何选择合适的时序数据库？
https://www.itcodemonkey.com/article/9339.html 时序数据已用于越来越多的应用中,包括物联网.DevOps.金融.零售.物流.石油天然气.制造业.汽车.太空 ...
- 使用windowAnimations定义Activity及Dialog的进入退出效果
看了android的源代码和资源文件,终于明白如何去修改设置Dialog和Activity的进入和退出效果了.设置Dialog首先通过getWindow()方法获取它的窗口,然后通过getAttrib ...
- 【驱动】linux设备驱动·扫盲
linux设备驱动 Linux系统把设备驱动分成字符设备.块设备和网络设备三种类型. 内核为设备驱动提供了注册和管理的接口,设备驱动还可以使用内核提供的其他功能以及访问内核资源. PCI局部总线 早期 ...
- 兼容ios和Android的复制js代码
//2种方法本人全部亲测有效 方法1:比较简单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...