Vue Router應(yīng)用方法詳解

更新時(shí)間：2022年09月20日 11:23:01 作者：??煙花易冷???

在看這篇文章的幾點(diǎn)要求：需要你先知道Vue-Router是個(gè)什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vue-Router的基本使用后再回來看這篇文章

服務(wù)端路由

服務(wù)端路由時(shí)指的是服務(wù)器根據(jù)用戶訪問的 URL 路徑返回不同的響應(yīng)結(jié)果。

在傳統(tǒng)的服務(wù)端渲染的 web 應(yīng)用中點(diǎn)擊一個(gè)鏈接時(shí)，瀏覽器會(huì)從服務(wù)端獲得全新的 HTML頁面，然后重新加載整個(gè)頁面。

然而，在單頁面應(yīng)用中，客戶端的 JavaScript 可以攔截頁面的跳轉(zhuǎn)請(qǐng)求，動(dòng)態(tài)獲取新的數(shù)據(jù)，無需重新加載的情況下更新當(dāng)前頁面。

這樣通?？梢詭砀樆挠脩趔w驗(yàn)，尤其是在更偏向“應(yīng)用”的場(chǎng)景下，因?yàn)檫@類場(chǎng)景下用戶通常會(huì)在很長(zhǎng)的一段時(shí)間中做出多次交互。

在這類單頁應(yīng)用中，“路由”是在客戶端執(zhí)行的。一個(gè)客戶端路由器的職責(zé)就是利用諸如 History API 或是 hashchange 事件這樣的瀏覽器 API 來管理應(yīng)用當(dāng)前應(yīng)該渲染的視圖。

路由的應(yīng)用場(chǎng)景

單頁面應(yīng)用（SPA應(yīng)用）：

顧名思義導(dǎo)航欄不變，內(nèi)容欄改變的應(yīng)用。
內(nèi)容欄根據(jù)導(dǎo)航欄的選擇變化的同時(shí)，頁面不會(huì)跳轉(zhuǎn)，也就是說不會(huì)產(chǎn)生新的請(qǐng)求。
js攔截頁面的跳轉(zhuǎn)請(qǐng)求，動(dòng)態(tài)的獲取新的數(shù)據(jù)，路徑也會(huì)隨之變化。
數(shù)據(jù)需要通過ajax的請(qǐng)求獲取。

路由

路由就是多個(gè)key-value的對(duì)應(yīng)關(guān)系。
每一個(gè)路由都需要路由器的支持。

監(jiān)聽瀏覽器 hashchange 事件實(shí)現(xiàn)路由

如果你只需要一個(gè)簡(jiǎn)單的頁面路由，而不想為此引入一整個(gè)路由庫，你可以通過動(dòng)態(tài)組件的方式，監(jiān)聽瀏覽器 hashchange 事件或使用 History API 來更新當(dāng)前組件。

<script>
import About from "./components/About.vue";
import Home from "./components/Home.vue";
import NotFound from "./components/Not Found.vue";
const routes = {
  //路由默認(rèn)跳轉(zhuǎn)到Home組件
  '/': Home,
  '/about': About
}
export default {
  data() {
    return {
      currentPath: window.location.hash
    }
  },
  computed: {
    //計(jì)算屬性的方法，響應(yīng)式的，緩存
    currentView() {
      //過濾#，匹配路由
      return routes[this.currentPath.slice(1) || '/' ] || NotFound
    }
  },
  mounted() {
    window.addEventListener('hashchange', () => {
      //只要window變化了就，把當(dāng)前的路徑給App組件下的屬性this.currentPath
      this.currentPath = window.location.hash
    })
  }
}
</script>
<template>
  <a href="#/" rel="external nofollow" >Home</a> |
  <a href="#/about" rel="external nofollow" >About</a> |
  <a href="#/non-existent-path" rel="external nofollow" >Broken Link</a>
  <br>
  <component :is="currentView" />
</template>

使用Vue Router+Vue2實(shí)現(xiàn)路由

用 Vue + Vue Router 創(chuàng)建單頁應(yīng)用非常簡(jiǎn)單：通過 Vue.js，我們已經(jīng)用組件組成了我們的應(yīng)用。當(dāng)加入 Vue Router 時(shí)，我們需要做的就是將我們的組件映射到路由上，讓 Vue Router 知道在哪里渲染它們。

1.安裝路由

npm i vue-router@3

注意：

vue3對(duì)應(yīng)的vue-router版本是4
vue2對(duì)應(yīng)的vue-router版本是3
我這里是vue2

2.導(dǎo)入VueRouter插件(main.js)

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import './assets/main.css'
//關(guān)閉vue的生產(chǎn)提示
Vue.config.productionTip = false
//使用路由器插件
Vue.use(VueRouter)
new Vue({
  render: (h) => h(App),
}).$mount('#app')

3.編寫創(chuàng)建路由器router（并暴露）的js文件（router/index.js）

import VueRouter from "vue-router";
import Home from "../components/Home";
import About from "../components/About";
import NotFound from "../components/Not Found";
//創(chuàng)建路由器并暴露
export default new VueRouter({
    //多個(gè)路由
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/Home',
            component:Home
        }
    ]
})

4.引入router（main.js）

import router from "./router";
new Vue({
  render: (h) => h(App),
  router:router
}).$mount('#app')

5. 測(cè)試

<template>
<div>
  <h1>Router Demo</h1>
  <router-link to="/home">Home</router-link>||
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</div>
</template>

Vue3 + Vue-router

到此這篇關(guān)于Vue Router應(yīng)用方法詳解的文章就介紹到這了,更多相關(guān)Vue Router內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: