大家好，今天來(lái)為大家分享reactrouter路由攔截的一些知識(shí)點(diǎn)，和React路由守衛(wèi)的問(wèn)題解析，大家要是都明白，那么可以忽略，如果不太清楚的話可以看看本篇文章，相信很大概率可以解決您的問(wèn)題，接下來(lái)我們就一起來(lái)看看吧！

vue-router同路由$router.push不跳轉(zhuǎn)怎么解決

你的問(wèn)題可能是如何“刷新”當(dāng)前頁(yè)面

當(dāng)使用路由參數(shù)時(shí)，例如從/user/foo導(dǎo)航到/user/bar，原來(lái)的組件實(shí)例會(huì)被復(fù)用。

因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷(xiāo)毀再創(chuàng)建，復(fù)用則顯得更加高效。

不過(guò)，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。

復(fù)用組件時(shí)，想對(duì)路由參數(shù)的變化作出響應(yīng)的話，$route.push無(wú)效，你可以簡(jiǎn)單地watch(監(jiān)測(cè)變化)$route對(duì)象：

constUser={

template:'...',

watch:{

'$route'(to,from){

//對(duì)路由變化作出響應(yīng)...

}

}

}

或者使用2.2中引入的beforeRouteUpdate導(dǎo)航守衛(wèi)：

constUser={

template:'...',

beforeRouteUpdate(to,from,next){

//reacttoroutechanges...

//don'tforgettocallnext()

}

}

如何是刷新當(dāng)前頁(yè)面的話可使用先push到一個(gè)空頁(yè)再push回來(lái)，但是這個(gè)方案回導(dǎo)致一個(gè)空白效果，常用的是再app.vue定義一個(gè)reload方法，再子頁(yè)面中調(diào)用

//app.vue

<template>

<router-viewv-if="isRouterAlive"></router-view>

</template>

<script>

exportdefault{

name:"App",

provide(){

return{

routerReload:this.reload

};

},

data(){

return{

isRouterAlive:true

};

},

methods:{

reload(){

this.isRouterAlive=false;

this.$nextTick(()=>(this.isRouterAlive=true));

}

}

};

</script>

//頁(yè)面

exportdefault{

inject:["routerReload"],

methods:{

reload(){

this.routerReload()

}

}

}

用了react或者vue，如何做SEO優(yōu)化呢

使用React或Vue做SEO優(yōu)化需要借助Nodejs實(shí)現(xiàn)服務(wù)端渲染（SSR）。

而要實(shí)現(xiàn)服務(wù)端渲染需要先搭建一個(gè)腳手架，你可以自己從零開(kāi)始搭建腳手架，但這很麻煩。最簡(jiǎn)單的就是使用開(kāi)源的框架，它們一般內(nèi)置就封裝好了腳手架，比如基于React的Next.js，和基于Vue的Nuxt.js。你也可以借助開(kāi)源的腳手架比如Razzle來(lái)實(shí)現(xiàn)SSR渲染。Razzle是我用過(guò)的比較好用的工具，因?yàn)樗`活。下面以React+Razzle為例，講講如何做SEO優(yōu)化（本文的示例代碼放在GitHub：github.com/liamwang/react-starter）。

首先，使用Razzle搭建腳手架，使用如下命令安裝Razzle并運(yùn)行它：

其實(shí)以上這樣簡(jiǎn)單的一步，Razzle基本上就把大部分工作已經(jīng)完成了。然后開(kāi)始添加幾個(gè)測(cè)試頁(yè)面并配置Router路由。文件結(jié)構(gòu)和路由配置如下圖所示：

紅色圈出來(lái)的部分是添加的幾個(gè)示例頁(yè)面，具體代碼可以參照我的GitHub源碼。這就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的支持服務(wù)端渲染的網(wǎng)站，運(yùn)行效果如下：

接著，編輯server.js實(shí)現(xiàn)自定義服務(wù)端渲染邏輯。打開(kāi)server.js文件，你會(huì)發(fā)現(xiàn)工具已經(jīng)幫你寫(xiě)好了基本的服務(wù)端渲染代碼，但是你可能要根據(jù)需求進(jìn)行自定義，比如自定義titile、meta標(biāo)簽。下面是一個(gè)示例：

為了利于SEO，你可以在這里任意自定義HTML頭標(biāo)簽，比如標(biāo)題和和關(guān)鍵字等。

最后，剩下的工作基本上就和你平時(shí)寫(xiě)React代碼一樣，比如Redux、Mobx、Sass等。

有不清楚的歡迎留言交流，希望我的回答對(duì)你有幫助！

react全家桶包括哪些技術(shù)

react全家桶：

react（整體架構(gòu)）+?redux||mobx（狀態(tài)管理）+?react-router（路由）+?axios（ajax請(qǐng)求）+?antd||react-material||antd-model(UI框架庫(kù))

replace和push的區(qū)別

react中push與replace的區(qū)別：push跳轉(zhuǎn)會(huì)形成history，可返回到上一層；而replace跳轉(zhuǎn)不會(huì)形成history，不可返回到上一層，適用于登錄后，不需要重新回到登錄頁(yè)面。

本教程操作環(huán)境：windows7系統(tǒng)、react16版本，DellG3電腦。

react中push與replace的區(qū)別

push:a-b-c，可以回到上一級(jí)

push跳轉(zhuǎn)會(huì)形成history，可返回到上一層。

語(yǔ)法：

1

this.props.history.push('router地址')

replace:a-b-c回不到上一級(jí)適用于登錄后，不需要重新回到登頁(yè)面

replace跳轉(zhuǎn)不會(huì)形成history，不可返回到上一層。

語(yǔ)法：

1

this.props.history.replace('router地址')

關(guān)于reactrouter路由攔截到此分享完畢，希望能幫助到您。