使用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-element-admin登錄攔截設(shè)置白名單方式
這篇文章主要介紹了vue-element-admin登錄攔截設(shè)置白名單方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
animate.css在vue項(xiàng)目中的使用教程
在vue項(xiàng)目中使用動(dòng)畫其實(shí)有多種方式，可以使用vue中的過(guò)渡transition，可以使用animate動(dòng)畫與transition配合使用，也可以單獨(dú)使用animate動(dòng)畫庫(kù)，下面我們開(kāi)始介紹在vue中單獨(dú)使用animate動(dòng)畫，感興趣的朋友一起看看吧2018-08-08
vue學(xué)習(xí)教程之帶你一步步詳細(xì)解析vue-cli
這篇文章的主題是vue-cli的理解?；蛟S，很多人在開(kāi)發(fā)vue的時(shí)候，我們會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題——只會(huì)去用，而不明白它的里面的東西?，F(xiàn)在的框架可以說(shuō)是足夠的優(yōu)秀，讓開(kāi)發(fā)者不用為搭建開(kāi)發(fā)環(huán)境而煩惱。但是有時(shí)候，我們還是得回到原始生活體驗(yàn)一下，才能夠讓自己更上層樓。2017-12-12
詳解vue路由篇(動(dòng)態(tài)路由、路由嵌套)
這篇文章主要介紹了詳解vue路由篇(動(dòng)態(tài)路由、路由嵌套)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue2.0仿餓了么webapp單頁(yè)面應(yīng)用詳細(xì)步驟
本篇文章給大家分享了Vue2.0仿餓了么webapp單頁(yè)面應(yīng)用詳細(xì)步驟，有興趣的朋友可以跟著操作下。2018-07-07
vue實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀑布流 + 下拉刷新 + 上拉加載更多(步驟詳解)
這篇文章主要介紹了vue實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀑布流 + 下拉刷新 + 上拉加載更多,本文分步驟通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue清空f(shuō)orm對(duì)象的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue.js中v-on:textInput無(wú)法執(zhí)行事件問(wèn)題的解決過(guò)程
大家都知道vue.js通過(guò)v-on完成事件處理與綁定，但最近使用v-on的時(shí)候遇到了一個(gè)問(wèn)題，所以下面這篇文章主要給大家介紹了關(guān)于vue.js中v-on:textInput無(wú)法執(zhí)行事件問(wèn)題的解決過(guò)程，需要的朋友可以參考下。2017-07-07
vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令方式
這篇文章主要介紹了vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08