使用vue-router完成簡(jiǎn)單導(dǎo)航功能【推薦】
vue-router是Vue.js官方提供的一套專用的路由工具庫(kù)
安裝命令如下
npm i vue-router -D
vue-router 實(shí)例是一個(gè)Vue插件，我們需要在Vue全局引用中通過(guò)Vue.use() 將它接入到Vue實(shí)例中。
在我們的工程中，,main.js是默認(rèn)的程序入口文件，所有的全局配置都會(huì)在這個(gè)文件中進(jìn)行。
我們?cè)趍ain.js中加入如下引用
import VueRouter from 'vue-router' Vue.use(VueRouter)
這樣就完成了 vue-router最基本的安裝工作了。
接下來(lái)我們要實(shí)現(xiàn)的功能描述如下
在首頁(yè)上有兩個(gè)鏈接分別是：購(gòu)物車和個(gè)人中心
點(diǎn)擊不同的鏈接顯示不同的內(nèi)容
首先我們?cè)?src 目錄下建立兩個(gè)組件文件： Cart.vue Me.vue
新建的兩個(gè)組件文件的內(nèi)容暫時(shí)都是同樣的結(jié)構(gòu)
<template>
<!-- 這個(gè)div里面的內(nèi)容可設(shè)置不同以區(qū)分 -->
<div>購(gòu)物車</div>
</template>
<script>
export default {}
</script>
<style lang="scss"></style>
接下來(lái)就是在main.js文件中定義路由與這些組件之間的匹配規(guī)則了。
VueRouter的定義非常簡(jiǎn)單：創(chuàng)建一個(gè)VueRouter實(shí)例，將路由path指定到一個(gè)組件類型上
如下代碼所示（main.js）
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//引入創(chuàng)建的兩個(gè)組件
import Cart from './Cart.vue'
import Me from './Me.vue'
//使用路由實(shí)例插件
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
base: '__dirname',
routes:[
//將頁(yè)面組件與path指令的路由關(guān)聯(lián)
{path:'/cart',component:Cart},
{path:'/me',component:Me}
]
})
new Vue({
el: '#app',
//將路由實(shí)例添加到Vue實(shí)例中去
router,
render: h => h(App)
})
我們可以將上面的路由有關(guān)的代碼提取出來(lái)放在另外的一個(gè)routes.js文件中去，防止main.js文件的內(nèi)容越來(lái)越長(zhǎng)。
新建一個(gè) config 文件夾，然后將routes.js文件加入進(jìn)去。
則routes.js代碼如下
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入創(chuàng)建的兩個(gè)組件
import Cart from '../Cart.vue'
import Me from '../Me.vue'
//使用路由實(shí)例插件
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
base: '__dirname',
routes:[
//將頁(yè)面組件與path指令的路由關(guān)聯(lián)
{path:'/cart',component:Cart},
{path:'/me',component:Me}
]
})
export default router;
然后main.js文件代碼就減小到如下：
import Vue from 'vue'
import App from './App.vue'
import router from './config/routes'
new Vue({
el: '#app',
//將路由實(shí)例添加到Vue實(shí)例中去
router,
render: h => h(App)
})
vue-router 提供了兩個(gè)指令標(biāo)簽
<router-view> : 渲染路徑匹配到的視圖組件
<router-link> : 支持用戶在具有路由功能的應(yīng)用中導(dǎo)航
在有了上面的兩個(gè)指令標(biāo)簽，我們就可以在程序入口 App.vue編寫相應(yīng)的代碼了：
<template>
<div id="app">
<div class="tabs">
<ul>
<li>
<router-link to ="/cart">
<div>購(gòu)物車</div>
</router-link>
</li>
<li>
<router-link to ="/me">
<div>個(gè)人中心</div>
</router-link>
</li>
</ul>
</div>
<div class="content">
<!-- 使用 router-view 渲染視圖 -->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style lang="scss"></style>
到此上面的代碼已經(jīng)實(shí)現(xiàn)了預(yù)期的功能了。
然后我們看to ="/cart"這個(gè)里面的路徑其實(shí)已經(jīng)在{path:'/cart',component:Cart}定義過(guò)了，如果需要修改，就得需要這兩個(gè)地方同時(shí)修改（如果有其他地方用的就改動(dòng)的更多）
那么直接將{path:'/cart',component:Cart}中的路徑取出來(lái)豈不是很好。
這個(gè)時(shí)候我們的 vue-router提供了一種隱式的路由引用方式，稱之為 —— 命名路由
簡(jiǎn)單來(lái)說(shuō)就是通過(guò)路由的名稱引用來(lái)取代Url
于是VueRouter的配置代碼改為如下：
const router = new VueRouter({
mode:'history',
base: '__dirname',
routes:[
//將頁(yè)面組件與path指令的路由關(guān)聯(lián)
{name:'cart',path:'/cart',component:Cart},
{name:'me',path:'/me',component:Me}
]
})
這樣我們?cè)?<router-link >的to屬性使用v-bind綁定到Vue實(shí)例中，然后通過(guò)名稱直接得到Url了
于是App.vue中的鏈接部分的代碼改為如下
<li>
<router-link :to ="{name:'cart'}">
<div>購(gòu)物車</div>
</router-link>
</li>
<li>
<router-link :to ="{name:'me'}">
<div>個(gè)人中心</div>
</router-link>
</li>
至此，使用vue-router完成了簡(jiǎn)單導(dǎo)航功能
說(shuō)明
<router-link>默認(rèn)渲染成帶有正確鏈接的<a>標(biāo)簽 ，也可以通過(guò)配置 tag 屬性生成別的標(biāo)簽
比如
<li>
<router-link :to ="{name:'cart'}" tag="span">
<div>購(gòu)物車</div>
</router-link>
</li>
總結(jié)
以上所述是小編給大家介紹的使用vue-router完成簡(jiǎn)單導(dǎo)航功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 基于vue-cli vue-router搭建底部導(dǎo)航欄移動(dòng)前端項(xiàng)目
- vue-router配合ElementUI實(shí)現(xiàn)導(dǎo)航的實(shí)例
- VueRouter導(dǎo)航守衛(wèi)用法詳解
- vue-router路由與頁(yè)面間導(dǎo)航實(shí)例解析
- vue router仿天貓底部導(dǎo)航欄功能
- 詳解使用Vue Router導(dǎo)航鉤子與Vuex來(lái)實(shí)現(xiàn)后退狀態(tài)保存
- vue-router 導(dǎo)航鉤子的具體使用方法
- 詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子
相關(guān)文章
vue路由跳轉(zhuǎn)攜帶參數(shù)的方式總結(jié)
我們知道在vue中每個(gè)頁(yè)面都需要在路由中聲明,下面這篇文章主要給大家介紹了關(guān)于vue路由跳轉(zhuǎn)攜帶參數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
這篇文章主要介紹了vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁(yè)面內(nèi)組件全過(guò)程(WEB)
寫頁(yè)面的時(shí)候都會(huì)用到一些導(dǎo)航欄、點(diǎn)擊不同的部分切換不同的頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁(yè)面內(nèi)組件的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue+Element實(shí)現(xiàn)表格編輯、刪除、以及新增行的最優(yōu)方法
這篇文章主要為大家詳細(xì)介紹了Vue+Element實(shí)現(xiàn)表格的編輯、刪除、以及新增行的最優(yōu)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要為大家介紹了Vue?uni-app以H5模式引入Jquery配置教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
el-upload多選文件上傳報(bào)錯(cuò)解決方案
本文主要介紹了el-upload多選文件上傳報(bào)錯(cuò)解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
在Vue項(xiàng)目中使用Typescript的實(shí)現(xiàn)
這篇文章主要介紹了在Vue項(xiàng)目中使用Typescript的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)
文件上傳在很多項(xiàng)目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文就介紹了Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)，感興趣的可以了解一下2021-06-06
vue?watch中如何獲取this.$refs.xxx節(jié)點(diǎn)
這篇文章主要介紹了vue?watch中獲取this.$refs.xxx節(jié)點(diǎn)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解如何使用vue實(shí)現(xiàn)可視化界面設(shè)計(jì)
Vue是一款流行的前端開(kāi)發(fā)框架,它的響應(yīng)式數(shù)據(jù)綁定和組件化特性使得它成為了可視化界面設(shè)計(jì)的一個(gè)理想選擇,本文將介紹如何使用Vue實(shí)現(xiàn)可視化界面設(shè)計(jì),并且演示一個(gè)基于Vue的可視化界面設(shè)計(jì)案例,需要的朋友可以參考下2023-12-12