vue-routerでビルド時にルーティングページが正しく表示されない問題の解決方法（詳細チュートリアル）

以下に、vue-router がビルド中にルーティング ページを適切に表示できない問題を解決する記事を共有します。これは良い参考値であり、皆様のお役に立てれば幸いです。

vue cli を使用して webpack プロジェクトを作成します

vue-router を追加し、ルーティングを使用して新しいコンポーネントを導入します。このとき、ルーティングとリンクは次のように書かれています

const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 routes: [
 {
  path: '/first',
  component: firstCom
 }
 ]
})

<a href="/first" rel="external nofollow" >Try this!</a>

1. npm run devで問題がないことを確認します

2. npm run build package

3. (例: python -m SimpleHTTPServer) 次に、index.html ページをチェックして、ルートが /first ページをリクエストしていることを確認します。

4. 解決策: ルーティング設定の履歴をハッシュに変更し、リンクの /first を /#/first に変更します。問題が解決しました。

============2017.8.24更新================

さらに詳しい情報を調べてみたところ、 、実際には、ルーターモードで履歴を使用することが可能です。問題はジャンプ中に発生しました。 window.location.href="" を使うのが当然だと思っていましたが、実際には router.push を使用する必要があります。コード内の handleSelect は、要素 ui に表示されるメッセージ処理メソッドの使用によるものです。このメソッドは、ボタンのキーが 2 の場合は 1 番目にジャンプし、キーが 3 の場合は 2 番目にジャンプするときにトリガーされることがわかります。

<script>
 export default {
 data () {
  return {
  }
 },
 methods: {
  handleSelect(key, keyPath) {
  if (key == 2){
   this.$router.push(&#39;first&#39;);
  } else if (key == 3){
   this.$router.push(&#39;second&#39;);
  }
  }
 }
 }
</script>

以上、皆様の参考になれば幸いです。

関連記事:

JavaScript Starry Navigation Barの実装方法

vue.jsのcomputed、filter、get、setの使い方と違いを詳しく解説

ドメイン名の購入からpm2デプロイの利用まで詳しく解説Node.js プロジェクトの全プロセス

以上がvue-routerでビルド時にルーティングページが正しく表示されない問題の解決方法（詳細チュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。