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 ...
随机推荐
- C# autocomplete
前台代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runa ...
- 2015219付颖卓《网络对抗》EXP8 Web基础
实验后回答问题 1.什么是表单 来自百度百科的官方定义:表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方 ...
- C#取出重复的方式以及用字典存储以键存储集合的方法
最近在做项目的时候,发现有些需求需要特别的方式来实现.下面看代码 private List<string> firstType = new List<string>(); pr ...
- 一个简单的定向python爬虫爬取指定页面的jpg图片
import requests as r import re resul=r.get("http://www.imooc.com/course/list") urlinfo=re. ...
- SOCKET.IO 的用法 系统API,
原文:http://www.cnblogs.com/xiezhengcai/p/3956401.html 1. 服务端 io.on('connection',function(socket)); 监听 ...
- 【Jest】笔记一:环境配置
一.开发环境 Mac node.js:v9.9.0 下载链接:http://nodejs.cn/download/ VScode 下载链接:https://code.visualstudio.com ...
- 企业SQL笔试
Student(SID, Sname, Sage, Ssex) 学生表 Course(CID, Cname, TID) 课程表 SC(SID, CID, score) 成绩 ...
- [Ms SQL] 基本創建、修改與刪除
##創建 table student, 內涵 id ,name ,tel三種columne,設定id為primary key create table student ( id int primary ...
- 关于 lua table表存储函数且运用
--table 是lua的一种数据结构用来帮助我们创建不同的数据类型.如:数组和字典--lua table 使用关联型数组,你可以用任意类型的值来做数组的索引,但这个值不能是nil--lua tabl ...
- java基础(二):java内部类
内部类像寄生虫一样生存在其他类[外部类]的内部.定义在类的内部的类叫内部类,它缩小了可见性.根据内部类定义结构的不同,可以把内部类分为 成员内部类和局部内部类.成员内部类定义的地方和外部类的成员变量和 ...