目录

 

 

以前的方法

新方法

---

 

以前的方法

以前是通过router的push进行跳转，代码如下：

<template>
  <div class="XXXXXXXXXXXXXXXXX" id="XXXXX" style="">
    <div class="item">
      <a><b><h1>XXXXXXXXXXX/h1></b></a>
    </div>
    <div class="item">
      <i class="XXX XXX XXX XXX"></i>
      <a @click="goXXXX" class="XXXXX" >XXXXXXXXXX</a>
    </div>
    ...
    ...
    ...
    ...
    ...
  </div>
</template>
 
<script>
  export default {
 
    methods:{
      goXXXX(){
 
        this.$router.push('/');
      },
      ...
      ...
      ...
      ...
    }
  }
</script>
 
<style>
 
</style>

这里通过调用了vue中的goXXX方法，然后方法中通过push进行路由跳转

 

新方法

在vue cli中有router-link中有个to，通过这个to即可进行跳转

    <router-link tag="div" class="tab-item" to="/search">
      <span class="tab-link">搜索</span>
    </router-link>

这里要配合router里面的index.js

export default new Router({
  routes: [
    {
        path: '/',
        redirect: '/recommend'
    },
    {
        path: '/recommend',
        component: Recommend
    },
    {
        path: '/singer',
        component: Singer
    },
    {
        path: '/rank',
        component: Rank
    },
    {
        path: '/search',
        component: Search
    }
  ]
})

这里给出源码！

tab.vue

<template>
  <div class="tab">
    <router-link tag="div" class="tab-item" to="/recommend">
      <span class="tab-link">推荐</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/singer">
      <span class="tab-link">歌手</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/rank">
      <span class="tab-link">排行
      </span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/search">
      <span class="tab-link">搜索</span>
    </router-link>
  </div>
</template>
 
<script type="text/ecmascript-6">
  export default {}
</script>
 
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .tab
    display: flex
    height: 44px
    line-height: 44px
    font-size: $font-size-medium
    .tab-item
      flex: 1
      text-align: center
      .tab-link
        padding-bottom: 5px
        color: $color-text-l
      &.router-link-active
        .tab-link
          color: $color-theme
          border-bottom: 2px solid $color-theme
</style>

router中的index.js

import Vue from 'vue'
import Router from 'vue-router'
 
import Recommend from 'components/recommend/recommend'
import Singer from 'components/singer/singer'
import Rank from 'components/rank/rank'
import Search from 'components/search/search'
 
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
        path: '/',
        redirect: '/recommend'
    },
    {
        path: '/recommend',
        component: Recommend
    },
    {
        path: '/singer',
        component: Singer
    },
    {
        path: '/rank',
        component: Rank
    },
    {
        path: '/search',
        component: Search
    }
  ]
})

运行截图如下：

点击后：