您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue route路由管理器如何安裝與配置”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue route路由管理器如何安裝與配置”吧!
Vue Router
是 Vue.js
官方的路由管理器。它和 Vue.js
的核心深度集成,讓構(gòu)建單頁面應(yīng)用變得易如反掌。包含的功能有:
嵌套的路由/視圖表
模塊化的、基于組件的路由配置
路由參數(shù)、查詢、通配符
基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
細(xì)粒度的導(dǎo)航控制
帶有自動激活的 CSS class 的鏈接
HTML5 歷史模式或 hash 模式,在 IE9 中自動降級
自定義的滾動條行為
安裝命令
npm install vue-router --save
如果在一個模塊化工程中使用它,必須要通過 Vue.use()
明確地安裝路由功能:
import Vue from "vue" import VueRouter from "vue-router" Vue.use(VueRouter)
之前我們使用腳手架vue-cli
創(chuàng)建項目時,實際已經(jīng)配置好了router
,創(chuàng)建完項目后,在項目根目錄下會有一個router
文件夾,router
下有一個index.js
文件,內(nèi)容如下:
import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/Home.vue"; // 1. 當(dāng)我們使用其他插件的時候,就必須使用Vue.use安裝插件 Vue.use(VueRouter); // 2. 定義路由,每個路由應(yīng)該映射一個組件 const routes = [ { path: "/", name: "Home", component: Home, }, { path: "/about", name: "About", component: About }, ]; // 3. 創(chuàng)建router實例 const router = new VueRouter({ // 配置路由和組件之間的應(yīng)用關(guān)系 routes, // (縮寫) 相當(dāng)于 routes: routes }); // 4. 導(dǎo)出router對象,然后在main.js中引用 export default router;
這個文件是專門配置路由的,最后將router
對象導(dǎo)出后,我們在項目的main.js
中引用即可
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; Vue.config.productionTip = false; new Vue({ router, // 在vue實例中添加router對象,就可以使用路由了 render: (h) => h(App), }).$mount("#app");
我們的2個組件代碼About
和Home
代碼如下:
// About.vue <template> <div> <h1>About</h1> </div> </template> <script> export default { name: "About" } </script> <style scoped> </style> // Home.vue <template> <div> <h1>Home</h1> </div> </template> <script> export default { name: "Home", }; </script> <style scoped> </style>
最后我們在App.vue
中,寫入如下代碼:
template> <div id="app"> <router-link to="/">首頁</router-link> <router-link to="/about">關(guān)于</router-link> <router-view></router-view> </div> </template> <style> </style>
使用<router-link>
來加載鏈接,然后使用to
表示跳轉(zhuǎn)的鏈接。最終會把<router-link>
渲染成<a>
標(biāo)簽。<router-view>
是路由的出口,也就是相應(yīng)url
下的代碼會被渲染到這個地方來。
但是當(dāng)我們啟動程序,訪問頁面的時候,url
地址上會出現(xiàn)#
這是因為vue-router
默認(rèn) hash
模式 ―― 使用 URL
的 hash
來模擬一個完整的 URL
,于是當(dāng) URL
改變時,頁面不會重新加載。
如果不想要很丑的 hash
,我們可以用路由的 history
模式,這種模式充分利用 history.pushState API
來完成 URL
跳轉(zhuǎn)而無須重新加載頁面。
const router = new VueRouter({ mode: "history", routes: [...] })
我們只需在router
文件夾下的index.js
中添加mode
為history
即可,之后重新訪問,http://localhost:8080/
就不會有#
號了
注意:history
模式還需要后臺配置支持。因為我們的應(yīng)用是個單頁客戶端應(yīng)用,如果后臺沒有正確的配置,當(dāng)用戶在瀏覽器直接訪問其他url
地址就會返回 404,這就不好看了。
所以呢,你要在服務(wù)端增加一個覆蓋所有情況的候選資源:如果 URL
匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個 index.html
頁面,這個頁面就是你 app
依賴的頁面。
到此,相信大家對“vue route路由管理器如何安裝與配置”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。