Vue の一般的な問題と解決策の概要 (推奨)

ルート: [
 {
 パス: '/login',
 名前: 'ログイン',
 メタ: {
 役割: ['管理者', 'ユーザー']
 },
 コンポーネント: () => import('../components/Login.vue')
 },
 {
 パス: 'ホーム',
 名前: 'ホーム',
 メタ: {
 役割: ['管理者']
 },
 コンポーネント: () => import('../views/Home.vue')
 },
]

// 管理者とユーザーの2つの役割があると仮定します
//バックグラウンドから取得したユーザーロールです。const role = 'user'
// router.beforeEach イベントはページに入る前にトリガーされます router.beforeEach((to, from, next) => {
 to.meta.roles.includes(role) の場合 {
 次（）
 } それ以外 {
 次へ({パス: '/404'})
 }
})

router.beforeEach((to, from, next) => {
 // トークンがある場合、ユーザーがログインしていることを意味します if (localStorage.getItem('token')) {
 // ログインしている場合、ログインページにアクセスするとホームページにリダイレクトされます if (to.path === '/login') {
 次へ({パス: '/'})
 } それ以外 {
 次({パス: to.path || '/'})
 }
 } それ以外 {
 // ログインしていない場合、アクセスしたページはすべてログインページにリダイレクトされます if (to.path === '/login') {
 次（）
 } それ以外 {
 次へ(`/login?redirect=${to.path}`)
 }
 }
})

router.addRoutes(ルート: Array<RouteConfig>)

const router = 新しいルーター({
 ルート: [
 {
  パス: '/login',
  名前: 'ログイン',
  コンポーネント: () => import('../components/Login.vue')
 },
 {パス: '/'、リダイレクト: '/home'}、
 ] 
})

const router = 新しいルーター({
 ルート: [
 {パス: '/'、リダイレクト: '/home'}、
 ] 
})

ルータ.addRoutes([
 {
 パス: '/login',
 名前: 'ログイン',
 コンポーネント: () => import('../components/Login.vue')
 }
])

{パス: '*'、リダイレクト: '/404'}

// 左メニューバーデータ menuItems: [
 {
 name: 'home', // ジャンプ先のルートの名前はパスではありません size: 18, // アイコンのサイズ type: 'md-home', // アイコンのタイプ text: 'Homepage' // テキストの内容 },
 {
 テキスト: 'セカンダリメニュー'、
 タイプ: 'ios-paper',
 子供たち： [
  {
  タイプ: 'ios-grid'、
  名前: 't1',
  テキスト: '表'
  },
  {
  テキスト: 'レベル 3 メニュー'、
  タイプ: 'ios-paper',
  子供たち： [
   {
   タイプ: 'ios-notifications-outline',
   名前: 'メッセージ',
   テキスト: 'メッセージを表示'
   },
  ]
  }
 ]
 }
]

<!-- メニューバー -->
<メニュー ref="asideMenu" theme="dark" width="100%" @on-select="gotoPage" 
アコーディオン :open-names="openMenus" :active-name="currentPage" @on-open-change="menuChange">
 <!-- ダイナミック メニュー -->
 <div v-for="(item, index) in menuItems" :key="index">
 <サブメニュー v-if="item.children" :name="index">
  <テンプレートスロット="タイトル">
  <アイコン :size="item.size" :type="item.type"/>
  <span v-show="isShowAsideTitle">{{item.text}}</span>
  </テンプレート>
  <div v-for="(subItem, i) in item.children" :key="index + i">
  <サブメニュー v-if="subItem.children" :name="index + '-' + i">
   <テンプレートスロット="タイトル">
   <アイコン :size="サブアイテム.size" :type="サブアイテム.type"/>
   <span v-show="isShowAsideTitle">{{subItem.text}}</span>
   </テンプレート>
   <MenuItem class="menu-level-3" v-for="(threeItem, k) in subItem.children" :name="threeItem.name" :key="index + i + k">
   <アイコン :size="threeItem.size" :type="threeItem.type"/>
   <span v-show="isShowAsideTitle">{{threeItem.text}}</span>
   </メニュー項目>
  </サブメニュー>
  <MenuItem v-else v-show="isShowAsideTitle" :name="サブアイテム名">
   <アイコン :size="サブアイテム.size" :type="サブアイテム.type"/>
   <span v-show="isShowAsideTitle">{{subItem.text}}</span>
  </メニュー項目>
  </div>
 </サブメニュー>
 <メニュー項目 v-else :name="item.name">
  <アイコン :size="item.size" :type="item.type" />
  <span v-show="isShowAsideTitle">{{item.text}}</span>
 </メニュー項目>
 </div>
</メニュー>

定数asyncRoutes = {
 '家'： {
 パス: 'ホーム',
 名前: 'ホーム',
 コンポーネント: () => import('../views/Home.vue')
 },
 't1': {
 パス: 't1',
 名前: 't1',
 コンポーネント: () => import('../views/T1.vue')
 },
 'パスワード': {
 パス: 'パスワード',
 名前: 'パスワード',
 コンポーネント: () => import('../views/Password.vue')
 },
 'メッセージ': {
 パス: 'msg',
 名前: 'メッセージ',
 コンポーネント: () => import('../views/Msg.vue')
 },
 'ユーザー情報': {
 パス: 'userinfo',
 名前: 'userinfo',
 コンポーネント: () => import('../views/UserInfo.vue')
 }
}

// ルーティングテーブルを生成するためにバックグラウンドデータを渡します menusToRoutes(menusData)

// メニュー情報を対応するルート情報に変換し、動的に追加します function menusToRoutes(data) {
 定数結果 = []
 定数の子 = []

 結果.push({
 パス： '/'、
 コンポーネント: () => import('../components/Index.vue'),
 子供たち、
 })

 データ.forEach(アイテム => {
 ルートを生成する(子、アイテム)
 })

 children.push({
 パス: 'エラー'、
 名前: 'エラー'、
 コンポーネント: () => import('../components/Error.vue')
 })

 // 最後に 404 ページを追加します。そうしないと、ログイン成功後に 404 ページにジャンプします result.push(
 {パス: '*'、リダイレクト: '/error'}、
 ）

 結果を返す
}

関数 generateRoutes(children, item) {
 if (アイテム名) {
 children.push(asyncRoutes[item.name])
 } そうでない場合 (item.children) {
 アイテム.children.forEach(e => {
  ルートを生成する(子供、e)
 })
 }
}

 <キープアライブ include="リスト">
  <ルータービュー/>
 </キープアライブ>

 {
  パス: '/detail',
  名前: '詳細',
  コンポーネント: () => import('../view/detail.vue'),
  メタ: {isRefresh: true}
 },

 時計：
 $route(宛先、送信元) {
  const fname = from.name
  定数 tname = to.name
  if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
  from.meta.isRefresh = false
 // ここでデータを再要求}
 }
 },

<キープアライブ>
 <ルータービュー:key="$route.fullPath"/>
</キープアライブ>

this.$router.push({
 パス: '/list',
 クエリ: { 'randomID': 'id' + Math.random() },
})

 <div class="app">
  <キープアライブ:include="keepAliveData">
   <ルータービュー/>
  </キープアライブ>
  <div class="loading" v-show="isShowLoading">
   <スピンサイズ="large"></スピン>
  </div>
 </div>

 // リクエストインターセプターを追加する this.$axios.interceptors.request.use(config => {
  this.isShowLoading = true
  設定を返す
 }, エラー => {
  this.isShowLoading = false
  Promise.reject(error) を返します。
 })

 // レスポンスインターセプターを追加します this.$axios.interceptors.response.use(response => {
  this.isShowLoading = false
  応答を返す
 }, エラー => {
  this.isShowLoading = false
  Promise.reject(error) を返します。
 })

読み込み回数: 0

 メソッド: {
  ロードを追加します（）{
   this.isShowLoading = true
   this.loadingCount++
  },

  isCloseLoading() {
   this.loadingCount--
   （this.loadingCount == 0）の場合{
    this.isShowLoading = false
   }
  }
 }

  // リクエストインターセプターを追加する this.$axios.interceptors.request.use(config => {
   this.addLoading()
   設定を返す
  }, エラー => {
   this.isShowLoading = false
   this.loadingCount = 0
   this.$Message.error('ネットワーク例外です。しばらくしてからもう一度お試しください')
   Promise.reject(error) を返します。
  })

  // レスポンスインターセプターを追加します this.$axios.interceptors.response.use(response => {
   this.isCloseLoading()
   応答を返す
  }, エラー => {
   this.isShowLoading = false
   this.loadingCount = 0
   this.$Message.error('ネットワーク例外です。しばらくしてからもう一度お試しください')
   Promise.reject(error) を返します。
  })

プリントJS({
 printable: id, // DOM ID
 タイプ: 'html',
 スキャンスタイル: false、
})

関数 printHTML(id) {
 const html = document.querySelector('#' + id).innerHTML
 // 新しいDOMを作成する
 定数div = document.createElement('div')
 定数 printDOMID = 'printDOMElement'
 div.id = 印刷DOMID
 div.innerHTML = HTML

 // 最初のテーブルの内容、つまりヘッダーを抽出します。const ths = div.querySelectorAll('.el-table__header-wrapper th')
 定数 ThsTextArry = []
 (i = 0, len = ths.length; i < len; i++) の場合 {
  ths[i].innerText !== '' の場合、thsTextArry.push(ths[i].innerText)
 }

 // 余分なヘッダーを削除する div.querySelector('.hidden-columns').remove()
 // 最初のテーブルの内容は抽出後には役に立たなくなります。div.querySelector('.el-table__header-wrapper').remove() を削除します。

 // 最初のテーブルの内容を 2 番目のテーブルに挿入します。let newHTML = '<tr>'
 (i = 0, len = ThsTextArry.length; i < len; i++) の場合 {
  newHTML += '<td style="text-align: center; font-weight: bold">' + ThsTextArry[i] + '</td>'
 }

 新しいHTML += '</tr>'
 div.querySelector('.el-table__body-wrapper table').insertAdjacentHTML('afterbegin', newHTML)
 // 新しい DIV をページに追加し、印刷後に削除します。document.querySelector('body').appendChild(div)
 
 プリントJS({
  印刷可能: printDOMID、
  タイプ: 'html',
  スキャンスタイル: false、
  style: 'table { border-collapse: collapse }' // 表のスタイル})

 div.削除()
}

アクシオス({
 メソッド: 'post'、
 URL: '/エクスポート',
})
.then(res => {
 // データは返されたバイナリデータであると仮定します const data = res.data
 const url = window.URL.createObjectURL(新しい Blob([データ]、{タイプ: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
 定数リンク = document.createElement('a')
 link.style.display = 'なし'
 link.href = URL
 link.setAttribute('ダウンロード', 'excel.xlsx')
 document.body.appendChild(リンク)
 リンク.クリック()
 document.body.removeChild(リンク)
})

アクシオス({
 メソッド: 'post'、
 URL: '/エクスポート',
 レスポンスタイプ: '配列バッファ',
})
.then(res => {
 // データは返されたバイナリデータであると仮定します const data = res.data
 const url = window.URL.createObjectURL(新しい Blob([データ]、{タイプ: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
 定数リンク = document.createElement('a')
 link.style.display = 'なし'
 link.href = URL
 link.setAttribute('ダウンロード', 'excel.xlsx')
 document.body.appendChild(リンク)
 リンク.クリック()
 document.body.removeChild(リンク)
}) 

xios.interceptors.response.use(レスポンス => {
  const res = レスポンス.data
  // 応答データ型がArrayBufferかどうかを判定します。trueはファイルダウンロードインターフェース、falseは通常のインターフェースです。if (res instanceof ArrayBuffer) {
    const utf8decoder = 新しい TextDecoder()
    const u8arr = 新しい Uint8Array(res)
    // バイナリデータを文字列に変換 const temp = utf8decoder.decode(u8arr)
    temp.includes('{code:199999') の場合
      メッセージ（{
       // 文字列をJSONオブジェクトメッセージに変換: JSON.parse(temp).msg,
        タイプ: 'エラー'、
        期間: 5000、
      })

      Promise.reject() を返す
    }
  }
  // 通常型インターフェース、コードは省略...
  戻り値
}, (エラー) => {
  // コードは省略...
  Promise.reject(error) を返します。
})

エクスポート関数 rewirteLog() {
  console.log = (関数 (log) {
    process.env.NODE_ENV == 'development' を返しますか? ログ: function() {}
  }(コンソールログ))
}