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

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <ul>
    <li>
      <router-link to="/">首页</router-link>
    </li>
    <li>
      <router-link to="/news">新闻</router-link>
    </li>
    <li>
      <router-link to="/user">用户</router-link>
    </li>
  </ul>

  <router-view></router-view>
</template>

を介して 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 が必要です。

<ul>
    <li v-for="(item, index) in list" :key="index">
        <router-link  :to="`/newscontent/${index}`"> {{item}}</router-link>
    </li>
</ul>

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. ルーターリンクは疑問符の形でジャンプします。

<router-link  :to="`/newscontent?aid=${index}`"> {{item}}</router-link>

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 にオブジェクトを渡します

<router-link :to="{name: &#39;news&#39;}">新闻</router-link>

GET を通じて値を渡します

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

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

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

<li v-for="(item, index) in list" :key="index">
    <router-link  :to="{name: &#39;content&#39;,query: {aid: index}}"> {{item}}</router-link>
</li>

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

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

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

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

<router-link :to="{name: &#39;userinfo&#39;,params: {id: 123}}">跳转到用户详情</router-link>

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

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

<button @click="this.$router.push({name: &#39;userinfo&#39;,params: {id: 666}})">点击跳转</button>

ルート リダイレクト

{ 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 の表示コンテンツを一緒に表示する

<div class="left">
  <ul>
    <li>
      <router-link to="/user/userlist">用户列表</router-link>
    </li>
    <li>
      <router-link to="/user/useradd">增加用户</router-link>
    </li>
  </ul>
</div>
<div class="right">
  <router-view></router-view>
</div>

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

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

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