Vueダイナミックルーティング構成、f5リフレッシュダイナミックルーティングが失われ、ルーティングリダイレクションがプロミスエラーを報告する----------------それは非常に簡単です
ビジネスプロセス
ユーザーログイン（トークンを取得するため）
ユーザートークンを取得したら、トークンを送信して（トークンが不要な場合は、この手順をスキップして）、動的ルーティングインターフェースをリクエストできます。
重要：動的ルーティングアレイはローカルに存在します
くるみ：
// 用户登录
PostUserToken(data)
.then( response => {
//设置token
this.$cookie.set('access_token',response.data.access_token,response.data.expires_in+"S")
let data = {
'access_token' : response.data.access_token }
//获取动态路由数组
GetMenuPath(data).then( response => {
if(response.data.resp_code == 200){
//动态路由存在本地-----退出登录时候清空
localStorage.setItem('newRouterArr',JSON.stringify(this.returnRouterArr(response.data.data)));
}else{
this.$message.error('导航菜单获取失败，请联系管理员');
}
this.$message({
message:'登录成功', type: 'success' });
// 关闭loading
this.loading = false;
})
})
動的ルーティング（router / index.js）をセットアップし、f5またはctrl + rリフレッシュが動的ルーティングを失うのを防ぎます
キーポイント：.vueファイルのパス、numが1と0に等しいという判断、そして最後のnext（）を導入します。
baseUrlは私の接頭辞の1つです。たとえば、フロントエンドコードデプロイメントパッケージがサーバーのゲートウェイファイル127.0.0.1:8080の下に配置されている場合、baseUrlは'/ gateway'に等しく、ローカルパッケージが実行され、ローカルアドレスもhttp：/になります。 / localhost：8080 / gateway /
くるみ：
// 获取动态路由
let newRouterArr = JSON.parse(localStorage.getItem('newRouterArr'));
//防止刷新时候（保证浏览器回退的时候）能直接返回到上个页面，不会叠加
let num = 1;
// 路由钩子
router.beforeEach((to, from, next) => {
//储存当前路由，便于在重新打开时候跳到上次关闭的页面（用户主动退出除外）
if(to.name){
localStorage.setItem('nowRouter',JSON.stringify(to));
}else if(from.name){
localStorage.setItem('nowRouter',JSON.stringify(from));
}
//首页时候，直接跳转（首页不是动态页面）
if(to.path == baseUrl+"/" || to.path == baseUrl){
next(baseUrl+'/index');
}
//不是首页，则添加动态路由（此时不确定用户去的是那个页面）
else if(newRouterArr && num){
num = 0;
//配置动态路由 newRouterArr 中已经配置好了name和path，现在只需要指向组件对象
newRouterArr.map((item,index)=>{
//组件的储存位置是 src/view/business/组件名.vue
newRouterArr[index].component = ()=>import('@/view/business/'+item.name+'.vue');
})
//添加路由
router.addRoutes(newRouterArr);
//跳转到相应页面
router.replace(to.path);
}
else{
next();
}
Promiseエラーを解決する
これのいくつかの小さなパートナーにはリダイレクトエラーPrimiseがあります。次に、メソッドのPromiseリダイレクトエラーを防止するために接続します
//解决Promise报错
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
小さなオンラインパートナーが言う信じてはいけないルータ-VUEアップグレードのみに依存し、Windowsの再インストールがつながります、
OK。これで基本的な紹介は終わりました
ので、よければコメントしてください。
嫌い、理由を説明してください。
感謝。