Vue3 ルーティング設定とルーティング ジャンプ パラメータ

1. ルーティングのインストール

npm i vue-router

2. 表示したいルートを書く

src ディレクトリに Pages フォルダーを作成し、その中にstudent.vue と person.vue という名前の 2 つの vue ファイルを作成します。

2 つの vue ファイルを別々に作成する

student.vue和person.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('../pages/person.vue'),
            name:'person',
            path:'/person'
        },
        {
            component:()=>import('../pages/student.vue'),
            name:'student',
            path:'/student'
        },
        {
            //实现路由重定向，当进入网页时，路由自动跳转到/student路由
            redirect:'/student',
            path:'/'
        }
    ]
})
export default router

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

main.jsでルーティングを使用する

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

app.vueでのルート表示、ルートジャンプにrouter-linkを使用し、どのルートにジャンプするかを表します

<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>

効果は下図のようになります。（学生ルートへ）または（人物ルートへ）をクリックするとルートジャンプが実行されます。

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

宣言的ルーティングはルーターリンクを通じてルーティングジャンプを実行し、プログラムによるルーティングは関数を通じて実装されます。

app.vue を変更します。vue3 は結合 API を使用するため、導入する必要があります。

useRouter を導入するには、useRoute だけでなく、

const router=useRouter()

const ルート=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 'vue-router'
const router=useRouter()
const route=useRoute()
const toStudent=()=>{
  router.push('student')
}
const toPerson=()=>{
  router.push('person')
}
</script>
<style scoped>

</style>

router.push によるルーティング ジャンプ

ルート間でルーターが使用されており、現在のルートは toute ルートを使用しています

結果は以下の図に示されており、プログラムによる配線ジャンプが実現されています。

 ルートの設定時にエイリアスを設定しない場合は、router.push 設定オブジェクトをジャンプする必要があります。

const toStudent=()=>{
  router.push({
    path:'/student'
  })
}
const toPerson=()=>{
  router.push({
    path:'/person'
  })
}

5. ルーティングパラメータ

5. 1クエリパラメータの受け渡し

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

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

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

<template>
    学生组件
    <div>{
   
   {data.query}}</div>
</template>

<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
    query: route.query
})
</script>

結果は以下の通り

5、2 pass params パラメータ 

params パラメータが person ルートに渡されると仮定すると、ルート設定中に変更する必要があります。

params パスパラメータはルートを指定するために名前を使用する必要があります

const toPerson=()=>{
  router.push({
    name:'person',
    params:{
      keyword:2
    }
  })
}

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

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

? 送信できるかどうかを示します

{
      component:()=>import('../pages/person.vue'),
      name:'person',
      path:'/person/:keyword?'
},

person.vueでparamsパラメータを受け取る

<template>
    人类组件
    <div>{
   
   {data.params.keyword}}</div>
</template>

<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
    params: route.params
})
</script>

効果は以下の通りです

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

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

 

子コンポーネントのパスには / がありません  

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

stu1 コンポーネントを作成する

<template>
stu1
</template>

<script setup>

</script>

<style scoped lang="less">

</style>

stu2 コンポーネントを作成する

<template>
stu2
</template>

<script setup>

</script>

<style scoped lang="less">

</style>

 Student コンポーネントのサブコンポーネントを表示する

<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 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
    query: route.query
})
</script>

ルーティングジャンプにルーターリンクを使用することで、プログラムによるルーティングをジャンプすることもできます。

to="/student/stu1" はジャンプするためにフルパスを使用する必要があります

結果を示す