目錄

?

?

以前的方法

新方法

---

?

以前的方法

以前是通過(guò)router的push進(jìn)行跳轉(zhuǎn)，代碼如下：

<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>

這里通過(guò)調(diào)用了vue中的goXXX方法，然后方法中通過(guò)push進(jìn)行路由跳轉(zhuǎn)

?

新方法

在vue cli中有router-link中有個(gè)to，通過(guò)這個(gè)to即可進(jìn)行跳轉(zhuǎn)

<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}] })

運(yùn)行截圖如下：

點(diǎn)擊后：

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。