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