<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)问题?的更多相关文章

  1. Vue 组件之 Router

    Vue 组件之 Router Vue 开发单页应用的时候,免不了使用Vue组件.在单页应用上如何进行组件切换? 结构如下图所示: 主页面包含Foo组件与Bar组件,在主页面中可以进行Foo与 Bar的 ...

  2. vue路由请求 router

    创建一个Router.js文件 // 路由请求//声明一个常量设置路菜单// import Vue from "vue/types/index";import Vue from ' ...

  3. vue学习之router

    路由文档:https://router.vuejs.org/zh/guide/ 使用vue做spa应用的话,一定会涉及到路由. 安装 安装router插件 npm install vue-router ...

  4. vue项目中router路由配置

    介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router:    cnpm install vue-rou ...

  5. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  6. Vue的路由Router之导航钩子和元数据及匹配

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  7. vue全家桶router、vuex、axios

    main.js import Vue from 'vue' import App from './App' import router from './router' import store fro ...

  8. vue & vue router & dynamic router

    vue & vue router & dynamic router https://router.vuejs.org/guide/essentials/dynamic-matching ...

  9. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  10. router.go,router.push,router.replace的区别

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现.当你点击 <router-link> 时,这个 ...

随机推荐

  1. pandas 基本操作

    1.     一维数据结构Series a.   概念:Series 是pandas 的一维数据结构,有重要的两个属性 index 和values b.  初始化: 可以通过 python 的 Lis ...

  2. Good Bye 2018 (A~F, H)

    目录 Codeforces 1091 A.New Year and the Christmas Ornament B.New Year and the Treasure Geolocation C.N ...

  3. This 关键字的三个用处

    ---恢复内容开始--- 1.this调用本类中的属性,也就是类中的成员变量 2.this调用本类中的其他构造方法,调用时要放在构造方法的首行. 1.this调用本类中的属性,也就是类中的成员变量 1 ...

  4. Shell脚本笔记(一)一些零碎的基础知识

    一些零碎的基础知识 一.认识Shell脚本 一)相关概念 Shell是一种命令解释器,作用是按次序执行(遇到子脚本,先执行子脚本的命令)用户输入的命令和程序. Shell脚本语言是弱类型语言,与其他脚 ...

  5. Python——lambda函数

    Lambda 函数又称匿名函数,匿名函数就是没有名字的函数,函数没有名字也行?当然可以啦.有些函数如果只是临时一用,而且它的业务逻辑也很简单时,就没必要非给它取个名字不可. 好比电影里面的群众演员,往 ...

  6. DWM1000 定位数据收发以及定位算法

    蓝点DWM1000 模块已经打样测试完毕,有兴趣的可以申请购买了,更多信息参见 蓝点论坛 正文: DWM1000 定位数据 官方定位程序,建议先学习基础API程序 参考手册: 在手册上提到,目前双向定 ...

  7. Springboot2.x 启动报错:Bean named 'xxxService'... but was actually of type 'com.sun.proxy.$Proxy82'

    Springboot 2.0.5 搭建一个新项目启动后报错:Bean named 'xxxService'... but was actually of type 'com.sun.proxy.$Pr ...

  8. WebKit discarded an uncaught exception in the webView:decidePolicyForNavigationAction:request:frame:decisionListener: delegate: <NSInvalidArgumentException> -[__NSArrayM objectForKey:]: unrecognized s

    <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=&quo ...

  9. Hadoop2.2.0集群的HA高可靠的最简单配置

    HA集群需要使用nameservice ID区分一个HDFS集群.另外,HA中还要使用一个词,叫做NameNode ID.同一个集群中的不同NameNode,使用不同的NameNode ID区分.为了 ...

  10. flask内容学习第三天(flak中的csrf跨站请求)

    问题一:什么是csrf? 英文全称Cross Site Request Forgery(跨站请求伪造): 通俗来讲就是攻击者盗用你的身份,冒用你的名义发出恶意请求,包括发送邮件,电话信息,甚至于转账或 ...