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> 时,这个 ...
随机推荐
- 安装supset遇到的问题
1.缺少pyconfig.h文件问题(python3.4) 执行下列两行命令: $sudo apt-get install build-essential cmake $sudo apt-get in ...
- vue-router那些事儿
vue-router适用于单页面应用. 一.vue-router的引用方法1.用script标签 <script src="https://unpkg.com/vue-router/d ...
- angular笔记_9
<style> .red{background:red} </style> 失去焦点 <input type="text" ng-model=&quo ...
- HOJ3237----BFS/DFS
/* 注意两点 . 不可以使用替换可用节点为不可用节点的方法进行DFS 因为角落也可能有油,替换了就出不来.(某学长指导) . 可用通过开一个数组(例如我的b[][]数组) 用了存储到当前位置剩余最大 ...
- NEO学习笔记,从WIF到地址
2018开年,先给大家拜个年,Happy Neo Year. 开年总得写点什么,就打算继续开学习笔记系列,一点一点仔细的去分析NEO. 今天说一说从WIF到地址的这一串关系. 简单说就一张图: 或 ...
- Kotlin基础(三)类、对象和接口
类.对象和接口 一.定义类的继承结构 一)Kotlin中的接口 Kotlin的接口与Java8中相似,它们可以包含抽象方法的定义以及非抽象方法的实现,但它们不能包含任何状态. interface Cl ...
- hihoCoder 1143 : 骨牌覆盖问题·一(递推,矩阵快速幂)
[题目链接]:click here~~ 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 骨牌,一种古老的玩具.今天我们要研究的是骨牌的覆盖问题: 我们有一个2xN的长条形 ...
- BZOJ2689 : 堡垒
问题等价于每个三角形里至少选择两个点. 考虑拓扑,每次取出度数为$2$的点$x$,代表一个只与最多一个三角形相邻的三角形$(x,y,z)$. 如果$x$已选,那么$(x,y)$以及$(x,z)$都已经 ...
- BZOJ2138 : stone
根据Hall定理,若存在一个区间满足内部需求数$>$内部石子数,则不存在完美匹配. 由于区间互不包含,所以设: $a[i]$表示右端点$\leq i$的区间的容量之和. $b[i]$表示左端点$ ...
- [Vijos1763]Wormhole (贪心/模拟?)
已经是NOIP考前的最后一天了 现在在杭州的宾馆里 因为自己没带电脑 因此用ADMAN的电脑 题目描述 一维的世界就是一个数轴.这个世界的狭小我们几乎无法想象. 在这个数轴上,有N个点.从左到右依次标 ...