Vue在單頁面應(yīng)用中，使用了hash路由及HTML5的history路由方式。其中hash路由雖然在一些場(chǎng)景下使用方便，但是由于帶有#號(hào)，對(duì)于SEO存在不利影響。因此，在需要讓搜索引擎能較好的識(shí)別并收錄的時(shí)候，使用HTML5 history路由方式，則成為了一個(gè)不錯(cuò)的選擇。

為了兼顧用戶和搜索引擎的需求，在Vue中使用HTML5 history路由時(shí)，需要注意以下兩個(gè)問題。第一，需要在服務(wù)器端對(duì)路由進(jìn)行配置，確保用戶在訪問其他網(wǎng)站時(shí)，也能夠正常訪問到你的網(wǎng)站。第二，需要在前端代碼中，確保從服務(wù)器請(qǐng)求數(shù)據(jù)時(shí)，參數(shù)能夠正確地傳遞給服務(wù)器，從而實(shí)現(xiàn)數(shù)據(jù)的正確渲染。

/*在服務(wù)器端配置路由*/
const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();
const root = __dirname + '/dist';
/*將dist作為靜態(tài)資源目錄*/
app.use(express.static(root));
/*使用connect-history-api-fallback，確保路由正常*/
app.use(history({
index: '/index.html',
rewrites: [
{ from: /^\/vue/, to: '/vue.html' },
{ from: /^\/react/, to: '/react.html' },
{ from: /^\/angular/, to: '/angular.html' }
]
}));
/*啟動(dòng)服務(wù)器*/
app.listen(3000);

/*在前端代碼中保證參數(shù)正確*/
this.$http.get('/api/list', {
params: {
page: this.currentPage
}
}).then((response) =>{
this.list = response.data.list;
})

當(dāng)然，如果需要更進(jìn)一步的SEO優(yōu)化，還需要考慮頁面的內(nèi)容、標(biāo)簽和鏈接等要素。但是通過優(yōu)秀的路由設(shè)置，可以為后續(xù)SEO工作打下良好的技術(shù)基礎(chǔ)。