vue-router的router.go(n)问题?
<template>
<div> <mt-navbar v-model="selected" class="container" @click.native="goRouter">
<mt-tab-item id="head-nav1">新歌</mt-tab-item>
<mt-tab-item id="head-nav2">排行</mt-tab-item>
<mt-tab-item id="head-nav3">歌单</mt-tab-item>
<mt-tab-item id="head-nav4">歌手</mt-tab-item>
<mt-tab-item id="head-nav5">彩铃</mt-tab-item>
</mt-navbar> </div>
</template> <script type="es6">
import { Navbar, TabItem } from 'mint-ui';
export default {
name:'head-nav',
data(){
return {
selected:'head-nav1'
}
},
components:{Navbar, TabItem},
methods:{
goRouter(){
var navItem=this.selected.charAt(this.selected.length-1);
switch(navItem){
case '1':this.$router.push({path:'index'});break;
case '2':this.$router.push({path:'rank'});break;
case '3':this.$router.push({path:'plist'});break;
case '4':this.$router.push({path:'singer'});break;
case '5':this.$router.push({path:'ringtone'});break;
}
}
}
}
</script> 回到上一级可以这么写 <template>
<div class="rank-head container" :style="style">
<a class="rank-head-back" @click="routerBack"></a>
{{title}}
</div>
</template> <script type="es6">
export default {
props:['title','style'],
name:'rank-head',
methods:{
routerBack(){
this.$router.go(-1);
}
}
}
</script> 这个demo的地址https://github.com/lavyun/vue-kugouMusic
vue-router的router.go(n)问题?的更多相关文章
- Vue 组件之 Router
Vue 组件之 Router Vue 开发单页应用的时候,免不了使用Vue组件.在单页应用上如何进行组件切换? 结构如下图所示: 主页面包含Foo组件与Bar组件,在主页面中可以进行Foo与 Bar的 ...
- vue路由请求 router
创建一个Router.js文件 // 路由请求//声明一个常量设置路菜单// import Vue from "vue/types/index";import Vue from ' ...
- vue学习之router
路由文档:https://router.vuejs.org/zh/guide/ 使用vue做spa应用的话,一定会涉及到路由. 安装 安装router插件 npm install vue-router ...
- vue项目中router路由配置
介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router: cnpm install vue-rou ...
- vue中使用router全局守卫实现页面拦截
一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...
- Vue的路由Router之导航钩子和元数据及匹配
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
- vue全家桶router、vuex、axios
main.js import Vue from 'vue' import App from './App' import router from './router' import store fro ...
- vue & vue router & dynamic router
vue & vue router & dynamic router https://router.vuejs.org/guide/essentials/dynamic-matching ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- router.go,router.push,router.replace的区别
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现.当你点击 <router-link> 时,这个 ...
随机推荐
- c#接口与抽象类的区别(一)
abstract 修饰符用于表示所修饰的类是不完整的,并且它只能用作基类.抽象类与非抽象类在以下方面是不同的: 抽象类不能直接实例化,并且对抽象类使用 new 运算符是编译时错误.虽然一些变量和值在编 ...
- jquery中,使用append增加新元素时,新增元素的绑定监听事件失效的解决办法
$("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果 ...
- AGC 030B.Tree Burning(贪心)
题目链接 \(Description\) 有一个长为\(L\)的环,上面有\(n\)棵树,坐标分别为\(a_i\).初始时在原点. 每次你可以选择顺时针或逆时针走到第一棵没有被烧掉的树,停在这个位置, ...
- Navicat操作数据库时一直显示加载中
用Navicat for mysql操作mysql数据库,其中一个表怎么也打不开,一直加载,还不能关闭.从网上搜索原因,主要是以下几个原因:原因一:表死锁,会出现这样的情况,锁不释放,无论多久都读取不 ...
- Java代码优化小结(一)
(1)尽量指定类.方法的final修饰符 带有final修饰符的类是不可派生的.在Java核心API中,有许多应用final的例子,例如java.lang.String,整个类都是final的.为类指 ...
- 第二章 《C++ Primer Plus》
第二章: 让窗口暂停: cin.get(); 作为接口的函数头: 函数头句法: 函数头描述了函数与调用它的函数之间的接口. int main(); int main(void); return 0; ...
- 潭州课堂25班:Ph201805201 django 项目 第三十八课 后台 文章发布,FastDFS安装 配置(课堂笔记)
, .安装FastDFS # 从docker hub中拉取fastdfs镜像docker pull youkou1/fastdfs # 查看镜像是否拉取成功docker images # 安装trac ...
- nodejs EventEmitter 发送消息
var util = require('util'); var evem = require('events').EventEmitter; function myem(){ evem.call(th ...
- mysql时间加减运算
一.MySQL 获得当前日期时间 函数 1.1 获得当前日期 + 时间(date + time) 函数:now() mysql> select now();+———————+| now() |+ ...
- 最全,可直接用的一些正则校验,判断邮箱,手机号码,车牌号,身份证号,网址,账号,密码,ip,去掉html格式,工商税号等。
一些正则校验,判断邮箱,手机号码,车牌号,身份证号,网址,账号,密码,ip,去掉html格式,工商税号等. // 判断邮箱 isValid = [text isValidEmail]; // 判断手机 ...