vue.js - vue-router的router.go(n)问题,他应该写在哪里
本文介绍了vue.js - vue-router的router.go(n)问题,他应该写在哪里的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我点击back按钮的时候想回到上一步,那么这个方法backBtn方法是写在哪里呢,是写在new Vue().$mount()
里还是实例Vue里?
http://jsbin.com/jatojo/edit?...
还有router.push(localtion)
。点击 <router-link :to="...">
等同于调用 router.push(...)
那么什么情况下写router.push(...)
而不写<router-link :to="...">
。举个例子,是用a标签然后通过methods里面的方法让他跳转的时候吗?
解决方案
如果你点击一个有样式的标签,或者是一个封装好的按钮组件,这些都不提供:to的接口的,此时就得用函数式路由了,比如这种
<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.js - vue-router的router.go(n)问题,他应该写在哪里的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文