怎么使用vue-router完成簡單導航功能-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關怎么使用vue-router完成簡單導航功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網(wǎng)站建設、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的懷寧網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結構的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

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)容暫時都是同樣的結構

<template>
 <!-- 這個div里面的內(nèi)容可設置不同以區(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指令的路由關聯(lián)
 {path:'/cart',component:Cart},
 {path:'/me',component:Me}
 ]
})
new Vue({
 el: '#app',
 //將路由實例添加到Vue實例中去
 router,
 render: h => h(App)
})

我們可以將上面的路由有關的代碼提取出來放在另外的一個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指令的路由關聯(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指令的路由關聯(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>

感謝各位的閱讀！關于“怎么使用vue-router完成簡單導航功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)頁標題：怎么使用vue-router完成簡單導航功能-創(chuàng)新互聯(lián)
文章起源：http://muchs.cn/article12/cspegc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站排名、網(wǎng)站建設、全網(wǎng)營銷推廣、ChatGPT、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容