最近做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设置路由跳转参数,以及接收参数的更多相关文章

  1. Vue设置路由跳转的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

  2. Vue.之.路由跳转

    Vue.之.路由跳转 在进行项目开发的过程中,需要使用路由进行跳转.如下: // 不带有参数,在页面上跳转到别的页面 1. this.$router.push('/login/init');  // ...

  3. Jquery Datatables 请求参数及接收参数处理

    Jquery Datatables 请求参数及接收参数处理 /** * Created by wb-wuyifu on 2016/8/9. */ /** * Created by wb-wuyifu ...

  4. vue 所有的路由跳转加一个统一参数

    需求是什么 所有的路由跳转加一个统一的参数 实现方式 先深入理解一下router的全局前置守卫 router.beforeEach((to, from, next) => { const que ...

  5. Vue之路由跳转 传参 aixos 和cookie

    一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以 ...

  6. vue二级路由跳转后外部引入js失效问题解决方案

    vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...

  7. vue当前路由跳转初步研究

    一样闲话少说,直接上问题,如图: 也是消息面板,没想到一个小小的消息面板,碰到这么多坑,惆怅. 就是如果当前路由和跳转路由不一样时,正常跳转没有任何问题.但是如果一样时,就不会跳转了,用了很多方法,比 ...

  8. vue -- router路由跳转错误 , NavigationDuplicated

    vue-router ≥3.0版本回调形式以及改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下 ...

  9. uploadify上传带参数及接收参数的方法

    function uploadify() { $("#uploadify").uploadify({ method:'post', uploader: '/Manage/Order ...

随机推荐

  1. 复杂透视表的SQL生成方法

    一般而言,利用表单查看数据时,会从不同的维度来涉及透视表.比如,从产品和时间维度分析销售数据. 当需要从时间维度去分析时,同时希望能有同比,环比数据,那么将时间维度设计成列将极大方便SQL的编写. 如 ...

  2. pycrypto安装各种方法试了,最后这种最快速最方便

    需要安装vs,然后按照如下步骤 这个不是在cmd中执行 而是在vs的命令行中执行

  3. WEB测试专题之测试分类

    虽然说是一个功能测试就概括了,但是其实这里面还别有洞天,大概区分为下面几个小类别:WEB测试专题之web测试分类一(1)链接测试链接是Web应用系统的一个主要特征,它是在页面之间切换和指导用户去一些不 ...

  4. html5 知识点简单总结02

    三个列表: 1.无序列表 默认样式  实心小圆点 ul type属性 "square" 实心方形 type属性  "circle" 空心圆 type属性  &q ...

  5. jQuery基础之二

    jQuery基础之二   jQuery的中文文档十分详细,并且权威.W3C的jQuery文档更加简单实用. jQuery 1.9.0 jQuery中文文档W3C的jQuery文档 jQuery操作DO ...

  6. advanceskeleton插件分身体和表情单独绑定的时候合并表情步骤

    advanceskeleton插件分身体和表情单独绑定的时候合并表情使用的代码以及合并步骤 1.身体单独绑定 2.表情单独绑定 3.合并步骤 ①原有adv表情文件删掉除了curve组以外所有东西 删除 ...

  7. RobotFramework-RIDE环境搭建一:关于Python2和Python3的共存使用

    最近在搭建Robot Framework自动化测试框架,由于Robot Framework 框架是基于Pytho语言开发的,要想使用Robot Framework 首先需要有Python环境. RID ...

  8. 2019年4月zstu月赛A: 我不会做

    问题 A: 我不会做 时间限制: 1 Sec  内存限制: 128 MB 题目描述 众所周知,duxing201606就是plw. 然而已经9102年了,plw仍旧没有npy.plw非常难过,于是他打 ...

  9. 关于 legend_noa

    真名:qlw 性别:男 常用ID:legend_noa(有时候也用fseject以表示我的弱, 曾经不懂事用goddess_Q),具体意思是我最喜欢的两个奥特曼:诺亚和雷杰多 p1 诺亚,p2 雷杰多 ...

  10. 两个队列实现栈&两个栈实现队列(JAVA)

    1,两个栈实现队列 题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路:栈的特点时先进后出,队列的特点是先进先出. 若此时有两个队列stack1,st ...