vue-routerビルド時にルーティングページが表示されない場合の対処方法

今回は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('first');
  } else if (key == 3){
   this.$router.push('second');
  }
  }
 }
 }
</script>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vueのルーティング権限管理

vue2.0のルーティングでrouter-viewが表示されない問題を解決

以上がvue-routerビルド時にルーティングページが表示されない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。