目錄

?

?

以前的方法

新方法

---

?

以前的方法

以前是通過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".tabdisplay: flexheight: 44pxline-height: 44pxfont-size: $font-size-medium.tab-itemflex: 1text-align: center.tab-linkpadding-bottom: 5pxcolor: $color-text-l&.router-link-active.tab-linkcolor: $color-themeborder-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}] })

運行截圖如下：

點擊后：

總結

以上是生活随笔為你收集整理的前端笔记-vue cli中使用router-link进行路由跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。