zoukankan      html  css  js  c++  java
  • 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
    
  • 相关阅读:
    天气查看
    省市区三级联动
    AJAX动态加载评论
    jquery插件实现分页
    obj-fit
    js使用正则表达式验证身份证格式
    弹性图片
    浏览器兼容问题
    Python3基础 __getattr__ 访问不存在的属性时,新增提示功能
    Python3基础 __delattr__ 在一个属性被删除时的行为
  • 原文地址:https://www.cnblogs.com/sxz2008/p/7084187.html
Copyright © 2011-2022 走看看