最近做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. 第十六次 ccf 201903-2 二十四点

    题意: 计算数学表达式的值, 数学表达式的定义: 4个[0-9]表示数字的字符 ,3个[+-x/]表示运算的字符 可以用正则为: ([0-9][+-x/]){3}[0-9] 例如: 5+2/1x3 2 ...

  2. 自适应reset.js布局 用于手机端页面编写

    以下是reset.js具体内容,是从淘宝网站拔下来的.把它存为js文件引入html里,它的默认尺寸是iphone4的分辨率也就是320*480,美工给你的图不管多少尺寸用ps量图后像素值(px)除以4 ...

  3. linux 部署

    一.d2 安装之后的配置 centos系统安装后的基本配置: .常用软件安装: yum install -y bash-completion vim lrzsz wget expect net-too ...

  4. C++动态链接库方法调用

    //定义内存的信息结构 [StructLayout(LayoutKind.Sequential)] public struct MEMORY_INFO { public uint dwLength; ...

  5. 学习笔记CB009:人工神经网络模型、手写数字识别、多层卷积网络、词向量、word2vec

    人工神经网络,借鉴生物神经网络工作原理数学模型. 由n个输入特征得出与输入特征几乎相同的n个结果,训练隐藏层得到意想不到信息.信息检索领域,模型训练合理排序模型,输入特征,文档质量.文档点击历史.文档 ...

  6. MySQL命令行登陆,远程登陆MySQL 的方法

    https://www.cnblogs.com/lvk618/p/3522321.html 1.MySQL自带工具的存放路径: D:\Program Files\MySQL\MySQL Server ...

  7. SQL盲注学习

    如果数据库运行返回结果时只反馈对错不会返回数据库当中的信息 此时可以采用逻辑判断是否正确的盲注来获取信息 盲注是不能通过直接显示的途径来获取数据库数据的方法 1.布尔盲注 2.时间盲注 3.报错型盲注 ...

  8. XSS学习(三)挖掘思路

    HTML标签之间 <div id="body"> [输出点] </div> payload:<script>alert(1)</scrip ...

  9. 截取所有的winform runtime error

    https://stackify.com/csharp-catch-all-exceptions/ AppDomain.CurrentDomain.FirstChanceException += (s ...

  10. 大数据量下的SQL Server数据库自身优化

    原文: http://www.d1net.com/bigdata/news/284983.html 1.1:增加次数据文件 从SQL SERVER 2005开始,数据库不默认生成NDF数据文件,一般情 ...