最近做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. 克拉美罗界(CRB)

    转载自:http://www.cnblogs.com/rubbninja/p/4512765.html 各种研究领域(包括无线定位方向)都会碰到参数估计的问题,这时常常会看到克拉美罗界 (Cramér ...

  2. java语言基础--方法的执行图解

    1.调用m1方法(压栈) 2.m1调用m2方法(压栈) 3.m2调用m3方法(压栈) 4.运行m3(弹栈) 5.运行m2(弹栈) 6.运行m1(弹栈)

  3. Xcode 添加pch 文件

    搜索prefix 找到 APPle Clang Language  ---> 将precompile Prefix Header 改为YES ----> 再输入$(SRCROOOT)/Ot ...

  4. 实现react路由动态加载的组件

    import React, { Component } from 'react'; import Loading from '../../base/nc_Loading'; /* * date: 20 ...

  5. 兄弟连学python---网络简介

    网络简介 1.什么是网络 网络是辅助双方能够连接在一起的工具 使用网络的目的 为了联通多方然后进行通讯,能够让软件在不同的电脑上运行,相互传输数据 网络的发展 网络协议 什么是协议 约定俗成的,没有理 ...

  6. 阿里云ECS Centos7 系统安装图形化桌面

    阿里云官网默认的Linux Centos7系统镜像,都是没有安装桌面环境的,用户如果要使用桌面,需要自己在服务器上进行安装. 本教程以MATE桌面安装为例 1.登录服务器,执行命令安装桌面环境. 先安 ...

  7. bzoj 4589 FWT

    #include<bits/stdc++.h> #define ll long long using namespace std; ; ; ; ; <<],b[<< ...

  8. thinkphp5.0.22远程代码执行漏洞分析及复现

    虽然网上已经有几篇公开的漏洞分析文章,但都是针对5.1版本的,而且看起来都比较抽象:我没有深入分析5.1版本,但看了下网上分析5.1版本漏洞的文章,发现虽然POC都是一样的,但它们的漏洞触发原因是不同 ...

  9. 解析观察者模式在安卓程序中的应用——如何实现跨界面Handler通讯

    这里特使用了github中的一个项目作为例子进行解析,地址为:https://github.com/LiqiNew/HandlerFrame/tree/master/handlerFrame/src/ ...

  10. cdcq的独立博客

    cdcq的独立博客终于又复活啦,以后就用这个了 地址: http://cdcq.coding.me 现在用的是luogu的博客:https://cdcq.blog.luogu.org/