vue.jsでのルーターの設定方法の紹介

この記事では、vue.js でのルーター設定方法を紹介します。必要な方は参考にしていただければ幸いです。

ルーティング モジュールを vue プロジェクトにインストールします

npm install vue-router --save-dev

ルーティングを設定する前に、まず ラベルと ラベルについて理解しましょう。同じ関数は、アドレスを含む

<router-link to="/body">点我跳转页面</router-link>

to にジャンプするために使用されます。ルートを設定するときに「/body」が定義されているため、 をクリックすると、この関数は無視されます。 router-link> には、H5 の に似た、ジャンプする必要があるページが表示されます

main.js ファイルにルーター モジュールを導入して設定します

<div>
   <router-view></router-view>
</div>

ルーターを定義したら、 タグと タグを使用します

//main.js

//引进路由器模块
import VueRouter from 'vue-router'

//引进跳转的 组件页面地址
import App_head from './App_head'
import body_z from './components/HelloWorld'

Vue.config.productionTip = false;
Vue.use(VueRouter);

//配置路由器
const router = new VueRouter({
  routes:[
    //path为 "/" 意思是：<router-view> 标签初始显示的地址
    //component为上面 组件名
    {path:"/",component:App_head},              
    {path:"/body",component:body_z}
  ],
  mode:"history"                 //定义这个后，打开网页，8080后面不会跟着 /#/ 的符号
});

new Vue({
  router,                              //记得在这里定义路由器，否则不能使用
  el: &#39;#app_body&#39;,
  components: { App_body },
  template: &#39;<App_body/>&#39;
})

関連する推奨事項:

Vue.js のネストされたルーティング (サブルーティング)

.js ルーティングの名前付けと命名表示

以上がvue.jsでのルーターの設定方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

vue.js ルーター

ソース：php.cn

前の記事：CSSでフォントサイズを制御するにはどうすればよいですか? CSSでレスポンシブフォントコントロールする方法の紹介 次の記事：vue.js に vue-resource モジュールを導入し、http クロスドメイン リクエストを実装する方法

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• プログラミングとは何ですか?
  2019-04-16 16:04:28
• 検索のショートカットキーはctrlキーとwhatキーです。
  2020-09-15 11:26:00
• カットのショートカットキーctrlには何が追加されるのでしょうか？
  2020-09-10 14:26:14
• それは何の職業ですか？
  2020-09-08 11:06:15
• Ctrl+キーを押すと何が保存されますか?
  2020-09-09 09:46:36
• ctrl+tのショートカットキーは何ですか?
  2020-10-12 14:51:04
• PS定規の使い方は？
  2020-09-10 14:40:02
• プログラミング学習に向いている人は？
  2019-04-24 16:20:55
• PSの逆選択のショートカットキーは何ですか？
  2020-10-13 11:40:03
• 2つのインライン要素の間に改行を追加する方法
  2019-04-15 14:06:21

最新の問題

d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...

から 2024-04-06 18:16:26

0

1

403

ベアラー トークンを処理するために適切なアプリケーション アーキテクチャを選択する OAuth2.0 を使用する API を使用したい つまり、サーバーが私の身元を確認できるように、後続のすべてのリクエストに含める必要があるアクセス トークンを取得する必要がありま...

から 2024-04-04 08:55:57

0

1

353

Vue.js の API プルを作成する 何が問題なのか、なぜこれが機能しないのかわかりません。ランダムな犬の写真 API を機能させたいだけですが、機能しません。以下のコードを参照してください。 exportdefaul...

から 2024-04-03 16:12:29

0

1

363

Vue.jsのデータ値は変更されません cat_pressed というデータと、データ値を変更するこの関数:changeCat(){this.cat_pressed===='brauh'} がありますが、関数を呼び出すた...

から 2024-04-03 09:29:23

0

1

369

Vue.js でゲッターや計算されたプロパティを使用するためのベスト プラクティス 私は vue.js が大好きで、計算プロパティと VueXgetters も大好きです。しかし、私の使用方法がパフォーマンスに何らかの欠点をもたらすかどうかがわからない段階に達しま...

から 2024-04-01 18:22:49

0

1

431

関連トピック

詳細>

• ゲートウェイとルーターの違い
• ルーターと猫の違い
• ルーターと猫の違いは何ですか?
• ルーターのデフォルトパスワード
• ルーターの設定方法
• ルーターの役割
• vue.js がエラーを報告するのはなぜですか?
• vue.js スロットの用途は何ですか?