Vue3 のルーティングについて説明し、ルーティングの構成方法を簡単に分析しましょう

この記事では、Vue3 のルーティングについて説明し、ルーティングの基本構成、動的ルーティング構成、ルーティング モード、ルーティング リダイレクトなどについて説明します。お役に立てば幸いです。

[関連する推奨事項:「vue.js チュートリアル」]

ルーティングの基本構成

1.プラグイン

npm install vue-router@next --save

2をインストールし、routers.tsファイル

3を作成し、routers.tsにコンポーネントを導入してパスを設定します。

import { createRouter,createWebHashHistory } from 'vue-router'; // 引入组件 import Home from './components/Home.vue'; import News from './components/News.vue'; import User from './components/User.vue'; const router = createRouter({ history: createWebHashHistory(), routes: [ {path: '/', component: Home}, {path: '/news', component: News}, {path: '/user', component: User}, ] }) export default router;

4. ルーティング ファイルを main.ts の vue にマウントします。

import { createApp } from 'vue' import App from './App.vue' import routers from './routers'; // createApp(App).mount('#app') const app = createApp(App); app.use(routers); app.mount('#app');

5. ルーティングを使用するコンポーネントが router-view コンポーネントまたは router-link

を介して router-link をマウントした後は、対応するページ パスに移動するだけで済みます。指定したルートを入力するとジャンプが完了し、router-linkはジャンプ用のタグの形でルーティングを実装します。

動的ルーティングの設定

routes.ts で次のようにルーティングを設定し、/:aid で動的ルーティングを設定します。

//配置路由 const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Home , alias: '/home' }, { path: '/news', component: News }, { path: '/user', component: User }, { path: '/newscontent/:aid', component: NewsContent }, ], })

ルーターリンクを経由する場合は、テンプレート文字列とコロン + to が必要です。

 
  {{item}} 
 

this.$route.params を通じて動的ルーティングによって渡される値を取得します。

mounted(){ // this.$route.params 获取动态路由的传值 console.log(this.$route.params) }

GET と同様の値の転送を実現したい場合は、次の方法を使用できます

1. ルートを通常のルートとして設定します。

const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Home , alias: '/home' }, { path: '/news', component: News }, { path: '/user', component: User }, { path: '/newscontent', component: NewsContent }, ], })

2. ルーターリンクは疑問符の形でジャンプします。

 {{item}}

3. this.$route.query を通じて get 値を取得します。

console.log(this.$route.query);

プログラムによるナビゲーションのルーティング (JS ジャンプ ルーティング)

this.$router.push で指定するだけです。

this.$router.push({ path: '/home' })

取得値の転送を実装したい場合は、次のメソッドを使用できます。

this.$router.push({ path: '/home', query: {aid: 14} }) }

動的ルーティングでは次の方法を使用する必要があります。

this.$router.push({ path: '/home/123', // query: {aid: 14} })

ルーティング モード

ハッシュ モード

ハッシュ モードの一般的な特徴は、ページ ルーティングにシャープ記号が含まれていることです。 。

const router = createRouter({ history: createWebHashHistory(), routes: [ ..., ], })

HTML5 履歴モード

• createWebHistory を導入します。

• ルーターの構成項目の履歴属性は、createWebHistory() に設定されます。

import { createRouter, createWebHistory } from 'vue-router' //配置路由 const router = createRouter({ history: createWebHistory(), routes: [ ... ], })

注: HTML5 履歴モードをオンにした後、サーバーに公開するときに擬似静的を構成する必要があります。

擬似静的メソッドの構成:

https://router.vuejs.org/zh/guide/essentials/history-mode.html#バックエンド構成例

名前付きルーティング

一般的な状況

• ルートを定義するときに名前属性を構成します

{ path: '/news', component: News,name:"news" }

• jump にオブジェクトを渡します

新闻

GET を通じて値を渡します

• ルートを定義し、名前属性を設定します。

{ path: '/newscontent', component: NewsContent, name: "content" },

• クエリを含むオブジェクトを渡します。

  {{item}} 

Through動的ルーティングのメソッド

• 動的ルーティングを定義し、名前属性を指定します

{ path: '/userinfo/:id', name: "userinfo", component: UserInfo }

• を含むオブジェクトを渡しますparams

跳转到用户详情

プログラムによるルーティング

は、上記のメソッドとよく似ています。

点击跳转

ルート リダイレクト

{ path: '', redirect: "/home" }, // 路由重定向 { path: '/home', component: Home },

ルート エイリアス

次の例では、people ルートへのアクセスは、エイリアス ルートへのアクセスと同じです。

{ path: '/user', component: User, alias: '/people' }

エイリアスは配列にすることもできます。

{ path: '/user', component: User, alias: ['/people','/u']}

動的ルーティングの形式。

{ path: '/userinfo/:id', name: "userinfo", component: UserInfo, alias: '/u/:id' }

ネストされたルーティング

ネストされたルーティングのアプリケーション シナリオは通常、ナビゲーション バーにあります。

• #ネストされたルートを定義する

{ path: '/user', component: User, children: [ { path: '', redirect: "/user/userlist" }, { path: 'userlist', component: UserList }, { path: 'useradd', component: UserAdd } ] }

ログイン後にコピー

• router-link と router-view の表示コンテンツを一緒に表示する

 
 
 用户列表 
 
 增加用户 
 
 
 
  

ログイン後にコピー
プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。 ！

以上がVue3 のルーティングについて説明し、ルーティングの構成方法を簡単に分析しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。