當前位置：首頁 > 前端技术 > vue >内容正文

vue

027_vue路由

發布時間：2025/5/22 vue 67 豆豆

生活随笔收集整理的這篇文章主要介紹了 027_vue路由小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 后端路由

1.1. 概念: 根據不同的用戶URL請求, 返回不同的內容。

1.2. 本質: URL請求地址與服務器資源之間的對應關系。

2. SPA(Single Page Application)

2.1. 后端渲染, 存在性能問題。

2.2. Ajax前端渲染, 提高前端渲染性能, 但是不支持瀏覽器的前進和后退操作。

2.3. SPA(Single Page Application)單頁面應用程序: 整個網站只有一個頁面, 內容的變化通過Ajax局部更新實現、同時支持瀏覽器地址欄的前進和后退。

2.4. SPA實現原理之一: 基于URL地址的hash, hash的變化會導致瀏覽器記錄訪問歷史的變化、但是hash的變化不會觸發新的URL請求。

2.5. 在實現SPA過程中, 最核心的技術點就是前端路由。

3. 前端路由

3.1. 概念: 根據不同的用戶事件, 顯示不同的頁面內容。

3.2. 本質: 用戶事件與事件處理函數之間的對應關系。

4. 通過window的onhashchange事件實現簡易前端路由

4.1. 基于URL中的hash實現, 點擊菜單的時候改變URL的hash, 根據hash的變化控制組件的切換。

4.2.?代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>通過window的onhashchange事件實現簡易前端路由</title></head><body><div id="app"><a href="#/zhuye">主頁</a> <a href="#/keji">科技</a> <a href="#/caijing">財經</a><a href="#/yule">娛樂</a><component :is="comName"></component></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 定義需要被切換的4個組件// 主頁組件const zhuye = {template: '<h1>主頁信息</h1>'};// 科技組件const keji = {template: '<h1>科技信息</h1>'};// 財經組件const caijing = {template: '<h1>財經信息</h1>'};// 娛樂組件const yule = {template: '<h1>娛樂信息</h1>'};var vm = new Vue({el: "#app",data: {comName: 'zhuye'},components: {zhuye,keji,caijing,yule}});// 監聽window的onhashchange事件, 根據獲取到的最新的hash值, 切換要顯示的組件的名稱window.onhashchange = function() {// 通過location.hash獲取到最新的hash值switch(location.hash.slice(1)){case '/zhuye':vm.comName = 'zhuye';break;case '/keji':vm.comName = 'keji';break;case '/caijing':vm.comName = 'caijing';break;case '/yule':vm.comName = 'yule';break;}}</script></body> </html>

4.3.?效果圖

5. Vue Router

5.1. Vue Router是Vue官方路由管理器。它和Vue.js的核心深度集成, 可以非常方便的用于SPA應用程序的開發。

5.2. Vue Router包含的功能:

5.2.1. 支持html5歷史模式或hash模式。

5.2.2. 支持嵌套路由。

5.2.3. 支持路由參數。

5.2.4. 支持編程式路由。

5.2.5. 支持命名路由。

6. Vue Router基本使用步驟

6.1. 引入相關的庫文件。

<script type="text/javascript" src="vue.min.js"></script>  <script type="text/javascript" src="vue-router_3.0.2.js"></script>

6.2. 添加路由鏈接。

<router-link to="/zhuye">zhuye</router-link> <router-link to="/keji">keji</router-link>

6.3. 添加路由填充位。

<router-view></router-view>

6.4. 定義路由組件。

// 定義路由組件 var zhuye = {template: '<h1>主頁信息</h1>' }; var keji = {template: '<h1>科技信息</h1>' };

6.5. 配置路由規則并創建路由實例。

// 創建路由實例對象 var router = new VueRouter({// 所有的路由規則routes: [// 每個路由規則都是一個匹配對象, 其中至少包含path和component兩個屬性。// path表示當前路由規則匹配的hash地址。// component表示當前路由規則對應要展示的組件。{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji }] });

6.6. 把路由掛載到Vue根實例中。

var vm = new Vue({el: "#app",// 掛載路由實例對象// router: routerrouter });

6.7. 路由重定向指的是: 用戶在訪問地址A的時候, 強制用戶跳轉到地址C, 從而展示特定的組件頁面; 通過路由規則的redirect屬性, 指定一個新的路由地址, 可以很方便地設置路由重定向。

// 創建路由實例對象 var router = new VueRouter({// 所有的路由規則routes: [// 每個路由規則都是一個匹配對象, 其中至少包含path和component兩個屬性。// path表示當前路由規則匹配的hash地址。// component表示當前路由規則對應要展示的組件。// 重定向path: '/'表示原地址, redirect表示將要被重定向到的新地址。{ path: '/', redirect: '/zhuye' },{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji }] });

6.8. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>vue-router的基本使用</title></head><body><div id="app"><router-link to="/zhuye">zhuye</router-link><router-link to="/keji">keji</router-link><router-view></router-view></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript" src="vue-router_3.0.2.js"></script><script type="text/javascript">// 定義路由組件var zhuye = {template: '<h1>主頁信息</h1>'};var keji = {template: '<h1>科技信息</h1>'};// 創建路由實例對象var router = new VueRouter({// 所有的路由規則routes: [// 每個路由規則都是一個匹配對象, 其中至少包含path和component兩個屬性。// path表示當前路由規則匹配的hash地址。// component表示當前路由規則對應要展示的組件。// 重定向path: '/'表示原地址, redirect表示將要被重定向到的新地址。{ path: '/', redirect: '/zhuye' },{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji }]});var vm = new Vue({el: "#app",// 掛載路由實例對象// router: routerrouter});</script></body> </html>

6.9. 效果圖

總結

以上是生活随笔為你收集整理的027_vue路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

路由
_vue