vue设置路由跳转参数,以及接收参数
最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项。解决方法如下:
在跳转链接处设置了路由跳转参数,如下:
<router-link :to="{path:'/project',query:{tab:0}}" >项目页</router-link>
然后在project页接收query传递过来的参数,methods里写一个方法:
cc:function(){
var tabId = this.$route.query.tab;
this.index = tabId; //index为控制切换的参数
},
然后把这个方法放到mounted(){}中执行
注:tab的值是你在选项卡中写的参数,比如你设置了一个变量index,index=0是,显示第一个选项卡的内容。
vue设置路由跳转参数,以及接收参数的更多相关文章
- Vue设置路由跳转的两种方法: <router-link :to="..."> 和router.push(...)
一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...
- Vue.之.路由跳转
Vue.之.路由跳转 在进行项目开发的过程中,需要使用路由进行跳转.如下: // 不带有参数,在页面上跳转到别的页面 1. this.$router.push('/login/init'); // ...
- Jquery Datatables 请求参数及接收参数处理
Jquery Datatables 请求参数及接收参数处理 /** * Created by wb-wuyifu on 2016/8/9. */ /** * Created by wb-wuyifu ...
- vue 所有的路由跳转加一个统一参数
需求是什么 所有的路由跳转加一个统一的参数 实现方式 先深入理解一下router的全局前置守卫 router.beforeEach((to, from, next) => { const que ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- vue二级路由跳转后外部引入js失效问题解决方案
vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...
- vue当前路由跳转初步研究
一样闲话少说,直接上问题,如图: 也是消息面板,没想到一个小小的消息面板,碰到这么多坑,惆怅. 就是如果当前路由和跳转路由不一样时,正常跳转没有任何问题.但是如果一样时,就不会跳转了,用了很多方法,比 ...
- vue -- router路由跳转错误 , NavigationDuplicated
vue-router ≥3.0版本回调形式以及改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下 ...
- uploadify上传带参数及接收参数的方法
function uploadify() { $("#uploadify").uploadify({ method:'post', uploader: '/Manage/Order ...
随机推荐
- Windows下Redis安装过程
1.去github下载Redis-x64-2.8.2402.zip压缩包 2.将压缩包解压到你要安装的目录下 3.将redis设置为开机自启动服务 redis-server --service-ins ...
- Golang微服务:万精油NATS在Micro中的应用
NATS是一个Golang技术栈的MQ服务,类似NSQ,但NATS更轻量级.性能更好.不支持离线.支持同步/异步通信模型,非常好用. NATS在MICRO中有哪些应用 Transport 笔者以前开发 ...
- 开发Canvas 绘画应用(四):实现拖拽绘画
在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元 ...
- MySQL-8.0.11与Navicat Premium安装教程
1. 下载MySQL 下载地址: https:////dev.mysql.com/downloads/mysql/ 百度云 链接:https://pan.baidu.com/s/1bxAtnvChZZ ...
- 内联元素padding与高度可控的分隔线实例页面
html: <a href="">登录</a><a href="">注册</a> css: a + a:befo ...
- python pip安装其他模块到中途失败问题
当网速很差时,pip安装到中途总是出现一大片红色然后失败.而且往往安装下载很久,失败了就要从新开始,失败如下 就是,当你出现这个错误Could not find a version that sati ...
- Struts2 2.5版本的通配符和动态方法调用的问题
Struts2.5版本之后,使用通配符的时候出现错误 配置的四个action,使用通配符和动态方法的时候找不到其中的update方法后来经过查找才知道原来是版本加了一个 <action name ...
- [工作积累] Google Play Services
注意添加APP_ID <meta-data android:name="com.google.android.gms.games.APP_ID" android:value= ...
- sed命令讲解
sed命令选项及作用 -n 不打印所有的行到标准输出 -e 表示将下一个字符串解析为sed编辑命令 -f 表示正在调用sed脚本文件 sed编辑命令 p 打印匹配行 = 打印文件行号 a\ 在定位行号 ...
- Linux----------nfs服务器的搭建及常识
一.nfs简介 nfs(network file system)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源. nfs主要适用用linu ...