ホームページ  >  記事  >  ウェブフロントエンド  >  Vue3 ルーティングを設定し、ルート ジャンプを実行し、パラメーターを渡すにはどうすればよいですか?

Vue3 ルーティングを設定し、ルート ジャンプを実行し、パラメーターを渡すにはどうすればよいですか?

王林
王林転載
2023-05-09 23:28:164502ブラウズ

    1. ルーティングをインストールします

    npm i vue-router

    2. 表示する必要があるルーティングを書き込みます

    src にページ フォルダーを作成します2 つの vue ファイルは、student.vue、person.vue という名前になります。

    Vue3 ルーティングを設定し、ルート ジャンプを実行し、パラメーターを渡すにはどうすればよいですか?

    2 つの vue ファイルをそれぞれ、

    student.vue と person.vue と書きます。 vue

    <template>
        学生
    </template>
     
    <script setup>
     
    </script>
     
    <style scoped lang="less">
     
    </style>
    <template>
    人类
    </template>
     
    <script setup>
     
    </script>
     
    <style scoped lang="less">
     
    </style>

    3. ルーティングの構成

    src ディレクトリの router.js ファイルを構成します

    import { createRouter,createWebHistory } from "vue-router";
    const router=createRouter({
        history:createWebHistory(),
        routes:[
            {
                component:()=>import(&#39;../pages/person.vue&#39;),
                name:&#39;person&#39;,
                path:&#39;/person&#39;
            },
            {
                component:()=>import(&#39;../pages/student.vue&#39;),
                name:&#39;student&#39;,
                path:&#39;/student&#39;
            },
            {
                //实现路由重定向,当进入网页时,路由自动跳转到/student路由
                redirect:&#39;/student&#39;,
                path:&#39;/&#39;
            }
        ]
    })
    export default router

    3. ルーティングを使用します

    メインでルーティングを使用します。 js

    import { createApp } from &#39;vue&#39;
    import App from &#39;./App.vue&#39;
    import router from &#39;./router&#39;
     
    createApp(App).use(router).mount(&#39;#app&#39;)

    app.vue でルートを表示し、ルーターリンクを使用してルートをジャンプし、どのルートにジャンプするかを表します。

    <template>
      <router-view></router-view>
      <hr>
      <div>
        <router-link to="/student">到student路由</router-link>
        <br>
        <router-link to="/person">到person路由</router-link>
      </div>
    </template>
     
    <script setup>
     
    </script>
    <style scoped>
     
    </style>

    効果は次の図に示すとおりです。学生ルート) または (個人へのルーティング) はルート ジャンプを実行します

    Vue3 ルーティングを設定し、ルート ジャンプを実行し、パラメーターを渡すにはどうすればよいですか?

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

    宣言型ルーティングはルーター リンクを介してルート ジャンプを実行します、プログラムによるルーティング関数を使用して実装

    app.vue を変更します。vue3 は複合 API を使用するため、

    useRouter、useRoute、

    を導入する必要があります。 const router=useRouter()

    const Route=useRoute()

    <template>
      <router-view></router-view>
      <hr>
      <div>
        <button @click="toStudent">到student路由</button>
        <br>
        <button @click="toPerson">到person路由</button>
      </div>
    </template>
     
    <script setup>
    import {useRouter,useRoute} from &#39;vue-router&#39;
    const router=useRouter()
    const route=useRoute()
    const toStudent=()=>{
      router.push(&#39;student&#39;)
    }
    const toPerson=()=>{
      router.push(&#39;person&#39;)
    }
    </script>
    <style scoped>
     
    </style>

    router.push Transfer を介したルート ホップ

    ルート間には router ルータを使用し、現在のルートには toute ルートを使用します。

    結果は下図のようになり、プログラムによるルートジャンプが実現します

    Vue3 ルーティングを設定し、ルート ジャンプを実行し、パラメーターを渡すにはどうすればよいですか?

    ルーティングの設定時にエイリアスが設定されていない場合は、router.push 設定オブジェクト

    const toStudent=()=>{
      router.push({
        path:&#39;/student&#39;
      })
    }
    const toPerson=()=>{
      router.push({
        path:&#39;/person&#39;
      })
    }

    5 を経由する必要があります。ルーティング パラメータ

    5. 1クエリパラメータの転送

    学生ルートにIDと名前を渡す

    const toStudent=()=>{
      router.push({
        path:&#39;/student&#39;,
        query:{
          id:1,
          name:&#39;张三&#39;
        }
      })
    }

    学生ルートはクエリパラメータを受け取ります

    <template>
        学生组件
        <div>{{data.query}}</div>
    </template>
     
    <script setup>
    import { reactive } from &#39;vue&#39;;
    import {useRouter,useRoute} from &#39;vue-router&#39;
    const route=useRoute()
    let data=reactive({
        query: route.query
    })
    </script>

    結果は図のようになります以下

    Vue3 ルーティングを設定し、ルート ジャンプを実行し、パラメーターを渡すにはどうすればよいですか?

    5, 2 params パラメータを渡す

    params パラメータが個人ルーティングに渡されると仮定すると、ルーティング設定中に変更する必要があります

    params パラメータを渡すには name を使用する必要があります ルートを指定します

    const toPerson=()=>{
      router.push({
        name:&#39;person&#39;,
        params:{
          keyword:2
        }
      })
    }

    同時に、ルーティング設定を変更する必要があります。キーワードが渡されたと仮定すると、

    パスでプレースホルダーとキーワードを使用する必要があります

    ?渡すことができるかどうかを示します。

    {
          component:()=>import(&#39;../pages/person.vue&#39;),
          name:&#39;person&#39;,
          path:&#39;/person/:keyword?&#39;
    },

    params パラメータを直接受け取ります。vue

    <template>
        人类组件
        <div>{{data.params.keyword}}</div>
    </template>
     
    <script setup>
    import { reactive } from &#39;vue&#39;;
    import {useRouter,useRoute} from &#39;vue-router&#39;
    const route=useRoute()
    let data=reactive({
        params: route.params
    })
    </script>

    効果は次のとおりです。

    Vue3 ルーティングを設定し、ルート ジャンプを実行し、パラメーターを渡すにはどうすればよいですか?

    6 、サブルーティング構成

    サブコンポーネント (stu1、stu2 コンポーネント) を学生ルートに追加します

    Vue3 ルーティングを設定し、ルート ジャンプを実行し、パラメーターを渡すにはどうすればよいですか?

    サブコンポーネントのパスには / が含まれていません。

    {
                component:()=>import(&#39;../pages/student.vue&#39;),
                name:&#39;student&#39;,
                path:&#39;/student&#39;,
                children:[
                    {
                        path:&#39;stu1&#39;,
                        name:&#39;stu1&#39;,
                        component:()=>import(&#39;../pages/stu1.vue&#39;)
                    },
                    {
                        path:&#39;stu2&#39;,
                        name:&#39;stu2&#39;,
                        component:()=>import(&#39;../pages/stu2.vue&#39;)
                    },
                    {
                        path:&#39;&#39;,
                        component:()=>import(&#39;../pages/stu1.vue&#39;)
                    }
                ]
            }

    Write stu1 コンポーネント

    <template>
    stu1
    </template>
     
    <script setup>
     
    </script>
     
    <style scoped lang="less">
     
    </style>

    Write stu2 コンポーネント

    <template>
    stu2
    </template>
     
    <script setup>
     
    </script>
     
    <style scoped lang="less">
     
    </style>

    学生コンポーネントのサブコンポーネントを表示します

    <template>
        学生组件
        <div>{{data.query}}</div>
        子组件展示
        <router-view></router-view>
        <router-link to="/student/stu1">到stu1</router-link>
        <router-link to="/student/stu2">到stu2</router-link>
    </template>
     
    <script setup>
    import { reactive } from &#39;vue&#39;;
    import {useRouter,useRoute} from &#39;vue-router&#39;
    const route=useRoute()
    let data=reactive({
        query: route.query
    })
    </script>

    ルーティング ジャンプに router -link を使用すると、プログラムによるルーティングを介してジャンプすることもできます

    to="/student/stu1" への完全なパスを使用する必要があります。ジャンプ

    結果を表示

    Vue3 ルーティングを設定し、ルート ジャンプを実行し、パラメーターを渡すにはどうすればよいですか?

    #

    以上がVue3 ルーティングを設定し、ルート ジャンプを実行し、パラメーターを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明:
    この記事はyisu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。