前端路由router的概念與原理

1. 什么是路由

路由（英文：router）就是對應關系。

2. SPA 與前端路由

SPA 指的是一個 web 網站只有唯一的一個 HTML 頁面，所有組件的展示與切換都在這唯一的一個頁面內完成。
此時，不同組件之間的切換需要通過前端路由來實現。

結論：在 SPA 項目中，不同功能之間的切換，要依賴于前端路由來完成！

3. 什么是前端路由

通俗易懂的概念：Hash 地址與組件之間的對應關系。

4. 前端路由的工作方式

① 用戶點擊了頁面上的路由鏈接
② 導致了 URL 地址欄中的 Hash 值發生了變化
③ 前端路由監聽了到 Hash 地址的變化
④ 前端路由把當前 Hash 地址對應的組件渲染都瀏覽器中

結論：前端路由，指的是 Hash 地址與組件之間的對應關系！

5. 實現簡易的前端路由

步驟1：通過component標簽，結合 comName 動態渲染組件。示例代碼如下：

步驟2：在 App.vue 組件中，為 鏈接添加對應的 hash 值：

步驟3：在 created 生命周期函數中，監聽瀏覽器地址欄中 hash 地址的變化，動態切換要展示的組件的名稱：

完整代碼：

<template><div class="app-container"><h1>App 根組件</h1><a href="#/home">首頁</a><a href="#/movie">電影</a><a href="#/about">關于</a><hr /><component :is="comName"></component></div> </template><script> // 導入組件 import Home from '@/components/Home.vue' import Movie from '@/components/Movie.vue' import About from '@/components/About.vue'export default {name: 'App',data() {return {// 在動態組件的位置，要展示的組件的名字，值必須是字符串comName: 'Home'}},created() {// 只要當前的 App 組件一被創建，就立即監聽 window 對象的 onhashchange 事件window.onhashchange = () => {console.log('監聽到了 hash 地址的變化', location.hash)switch (location.hash) {case '#/home':this.comName = 'Home'breakcase '#/movie':this.comName = 'Movie'breakcase '#/about':this.comName = 'About'break}}},// 注冊組件components: {Home,Movie,About} } </script><style lang="less" scoped> .app-container {background-color: #efefef;overflow: hidden;margin: 10px;padding: 15px;> a {margin-right: 10px;} } </style>

這里使用a標簽進行定位，會用到a標簽的錨鏈接的功能，所以在訪問的路徑的前面需要加個“#”
在App.vue組件的生命周期函數created()方法中，通過window.onhashchange事件，即監聽導航欄的地址是否發生變化，將相應的組件通過動態綁定的方式，更新到component組件中。

總結

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

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