vue 路由 及 跳转传递参数的总结
博客地址:https://ainyi.com/4
vue-router
- vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
- 传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是应该是路径之间的切换,也就是组件的切换
1. 是路由和页面(组件)对应
2. 通过router-link进行跳转
<router-link
:to="{
path: 'yourPath',
params: {
id: id,
dataObj: data
},
query: {
id: id,
dataObj: data
}
}">
</router-link>
- 这里涉及到三个参数
path -> 是要跳转的路由路径(推荐换成 name 值,name: pathName
,命名路由,两者都可以进行路由导航
)
params -> 是要传送的参数,参数可以直接 key:value 形式传递(类似post)
query -> 是通过 url 来传递参数的同样是 key:value 形式传递(类似get)
接收参数:
this.$route.query.id
this.$route.params.id
关于path路径加不加 / 的问题,加了/就是在根路径下跳转,不加就是在当前路径后面跳转,子页面,使用命名路由就不用管加不加 / 的问题了
3. 复用组件时,想对路由参数的变化作出响应的话,可以 watch(监测变化) $route 对象
watch:{
//监听相同路由下参数变化的时候,从而实现异步刷新
'$route'(to,from){
//做一些路由变化的响应
this.loading = true;//打开加载动画
this.getCateShop();//重新获取数据
},
},
4. 全局钩子,在main.js配置,可用作用户拦截
//在进入路由之前, 每一次都会执行此方法 全局钩子
router.beforeEach(function(to,from,next){
//设置网页标题
document.title = to.meta.title;
//检查是否已登录
let userObj = JSON.parse(sessionStorage.getItem('user'));
if(userObj){
//执行方法,将用户名设置进全局参数 vuex
//提交mutation的Types.SETUSERNAME方法
//第二个参数是携带的参数
//main.js使用vuex的提交方法,不需要this.$store.commit(),直接就store.commit()
store.commit(Types.SETUSERNAME,userObj.username);
}else{
//如果未登录,想要进入admin目录,则自动跳回首页
if(to.path.indexOf('admin') != -1){
// alert("进了");
router.push({name:'home'});
}
}
next(); //继续往下走
});
博客地址:https://ainyi.com/4
vue 路由 及 跳转传递参数的总结的更多相关文章
- vue-cli 配置路由之间跳转传递参数
1.有2种方式去传参,如下代码: <template> <div> <div>这里是首页</div> <router-link :to=" ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参页面刷新参数丢失问题解决方案
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- Vue:不同页面之间的传递参数--params
在嵌套vue-router情况下,不同页面之间传递参数可以通过params实现.而params传参分为两种情况: 1.参数在url中显示 首先你要确定自己要传的参数,并在控制路由的文件中的Router ...
- js跳转传递参数
额,利用j获取了GridView中选中行数据后,通过JavaScript做跳转,传递参数的时候发现,当参数有中文的时候就会乱码, 当然出现这种情况的时候就需要对跳转的url进行编码 var urlX ...
- jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)
Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar ...
- vue项目webpack中Npm传递参数配置不同域名接口
项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...
- [转] 微信小程序 页面跳转 传递参数
本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...
- Vue:不同页面之间的传递参数(二)---query
1) 在router文件下的index.js中,添加相关路径 routes: [ { path: '/', name: 'Hello', component: HelloWorld }, { path ...
随机推荐
- 洛谷P1746 离开中山路
https://www.luogu.org/problemnew/show/P1746 思路:用广搜从起点开始,遍历所有可达的点,再往下遍历直到到达终点,所以能保证得到的结果一定是最优解 #inclu ...
- cordova 问题汇总
用chrome进行调试: https://jingyan.baidu.com/album/db55b609fde96d4ba30a2fa9.html?picindex=8 http://rensann ...
- 《DevOps软件架构师行动指南》读后感
从软件架构师视角讲解了引入DevOps实践所需要拥有的技术能力,涵盖运维.部署流水线.监控.安全与审计以及质量关注,这是本书一开始内容简介的开头,本书的作者是伦恩·拜斯(Len Bass).英戈·韦伯 ...
- asp.net项目配置Web.config,支持JSON
VS2013新建的web项目不支持直接下载json文件,可以在项目的web.config下插入如下的配置信息. <configuration> <system.web> < ...
- HDU 2149 巴什博奕
点这里去做题 基础的巴什博奕,注意m<n的情况 #include<bits/stdc++.h> int main() { int n,m,r,i; while(scanf(" ...
- Windows的奇巧淫技(为什么GIF显示不出来??)
谁的电脑里没点小秘密?东藏西藏到最后自己都找不到了有木有?今天教大家个隐藏文件的高招: 将任意文件隐藏到图片中!怎么样?再也不用建什么「马列主义哲学」的文件夹啦!
- day17_雷神_数据库 小全
# 数据库 1.mysql 介绍 一 数据库管理软件的由来 程序的所有组件不可能只在一个机子上,性能问题和单点故障, 程序分散了,还需要解决数据共享问题, 基于网络访问这台共享的机器,用socket. ...
- c++ 实现hashmap
由于hashmap不是c++ stl中标准实现,这样在跨平台使用时就可能会出现问题,于是想到自己实现一个hashmap hash算法使用开链法解决hash冲突,主要实现了添加,删除,查找几个方法 头文 ...
- Python 操作excel之 openpyxl模块
1. 安装 pip install openpyxl 想要在文件中插入图片文件,需要安装pillow,安装文件:PIL-fork-1.1.7.win-amd64-py2.7.exe · font(字体 ...
- 每天学点SpringCloud(十):SpringCloud监控
今天我们来学习一下actuator这个组件,它不是SpringCloud之后才有的,而是SpringBoot的一个starter,Spring Boot Actuator.我们使用SpringClou ...