Vue 的 hash 模式是路由的一種模式,它的特點是 URL 帶 # 號,常見于早期的單頁面應用。但是,隨著瀏覽器 API 的升級,hash 模式已經被改進為更好的 history 模式,這種模式使用的是標準的 URL,不僅美觀,而且它更直觀,更易于 SEO。
那么,如何去掉 Vue 的 hash 模式呢?我們可以采取以下步驟:
//在路由文件 index.js 中取消 hash 模式,改為 history 模式 import Vue from 'vue' import Router from 'vue-router' import Home from '@/views/Home.vue' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home } ] })
第一步就是將 mode 屬性的值設置為 history。接下來,在服務端中,需要進行一個配置,因為 history 模式使用的是標準的 URL,所以需要在服務端中對所有請求都進行一個重定向。
//在服務端中添加重定向 const express = require('express') const path = require('path') const app = express() const staticPath = path.resolve(__dirname, '../dist') app.use(express.static(staticPath)) app.get('*', (req, res) =>{ res.sendFile(path.resolve(__dirname, '../dist/index.html')) }) app.listen(80, () =>{ console.log('server started at http://localhost:80') })
以上代碼將所有的請求都進行了一個重定向,解決了 history 模式需要在服務端中配置的問題。現在,我們就可以愉快地擺脫掉將近淘汰的 hash 模式了。
上一篇vue apis
下一篇mysql分區表建表日期