最近做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. [LeetCode&Python] Problem 671. Second Minimum Node In a Binary Tree

    Given a non-empty special binary tree consisting of nodes with the non-negative value, where each no ...

  2. 关于html2canvas跨域设置

    最近在做js生成图片的功能,因为有的商户logo图片在阿里云oss存储的,所以遇到了跨域的问题.跨域的话可以在服务器端设置header, 跨域的话目前的解决方案是服务端设置,Access-Contro ...

  3. Python学习之路基础篇--06Python基础+dict的学习

    字典和列表其实差不多,所说3.6 之前的版本字典是没有顺序的.是Python中唯一的映射数据类型,key 是可哈希(不可变数据类型),如元组.bool.int 和 str:value 是任意数据类型. ...

  4. shell脚本-2

    http://www.runoob.com/linux/linux-shell-variable.html 字符串可以用单引号,也可以用双引号,也可以不用引号.单双引号的区别跟PHP类似. 单引号字符 ...

  5. basic knowledge

    ---恢复内容开始--- TCP/IP指的是利用IP通信时必须用到的协议群统称. 分层模型: 1.物理层:硬件. 2.数据链路层:网络接口层.当做NIC驱动程序. 3.网络层:互联网层.IP协议基于I ...

  6. sql执行内部操作期间检测到不一致性解决方案

    解决方法:重启下SQL服务,把下面脚本运行即可.运行后,坏掉的数据库可能会丢失. --mydb 为坏了的数据库名--mytable  为坏了的据库表--master 这里不需要更改 use mydb  ...

  7. 只有mdf文件和ldf文件--怎么恢复数据库

    1.将mdf和ldf放到你电脑的路径中. 2.执行以下语句 USE master; GO CREATE DATABASE DBName ON (FILENAME = 'C:\Program Files ...

  8. java面试总躲不过的并发(二):volatile原理 + happens-before原则

    一.happens-before原则 同一个线程中的,前面的操作 happens-before 后续的操作.(即单线程内按代码顺序执行.但是,在不影响在单线程环境执行结果的前提下,编译器和处理器可以进 ...

  9. TCP建立与断开连接、socket通讯模板

    在传输层,有一个重点是TCP传输时建立连接的三次"握手"和四次"挥手",因为socket工作于应用层和传输层之间,故而涉及到建立连接和关闭连接的过程,以下笔记可 ...

  10. java8_api_jni

    java本地接口    jni    java native interface,用于java代码和本地编程语言(c,c++等)交互的编程接口    java不太会跟底层硬件打交道,而c,c++跟底层 ...