Vue3 라우팅을 구성하고 경로 점프를 수행하고 매개변수를 전달하는 방법은 무엇입니까?-View.js-php.cn

Vue3 라우팅을 구성하고 경로 점프를 수행하고 매개변수를 전달하는 방법은 무엇입니까?

王林

풀어 주다： 2023-05-09 23:28:16

앞으로

4533명이 탐색했습니다.

1. 라우팅 설치

npm i vue-router

로그인 후 복사

2. 표시해야 할 라우팅을 작성합니다.

src 디렉터리에 페이지 폴더를 만들고, Student.vue, person.vue

Vue3 라우팅을 구성하고 경로 점프를 수행하고 매개변수를 전달하는 방법은 무엇입니까?

라는 두 개의 vue 파일을 만듭니다.

각각 두 개의 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(&#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 라우팅을 사용합니다

main.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 ()를 소개하려면 ROUTER.PUSHALITING ROUTER.PUSH
라우팅 라우터가 라우터간에 사용됩니다. 현재 경로는 toute 라우팅을 사용하고 있으며 결과는 아래 그림과 같습니다. 경로 구성 시 별칭이 설정되어 있지 않으면 Transfer
<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>
로그인 후 복사
를 통해 점프해야 합니다. 5, 경로 매개변수

5, 1 쿼리 매개변수 전송

pass id, 이름을 학생 경로로

const toStudent=()=>{
  router.push({
    path:&#39;/student&#39;
  })
}
const toPerson=()=>{
  router.push({
    path:&#39;/person&#39;
  })
}
로그인 후 복사
student 경로가 쿼리 매개변수를 수신
const toStudent=()=>{
  router.push({
    path:&#39;/student&#39;,
    query:{
      id:1,
      name:&#39;张三&#39;
    }
  })
}
로그인 후 복사
효과는 아래 그림과 같습니다

5, 2 params 매개변수 전송 Vue3 라우팅을 구성하고 경로 점프를 수행하고 매개변수를 전달하는 방법은 무엇입니까?

params 매개변수가 개인 경로로 전달되고 라우팅 구성 중에 수정되어야 한다고 가정합니다.

params 매개변수는 경로를 지정하기 위해 이름을 사용하여 지정되어야 합니다. 시간이 지나면 라우팅 구성을 수정해야 합니다. 키워드가 전달되었다고 가정합니다.

path

에 자리 표시자와 키워드를 사용해야 합니까? 통과 가능 여부를 나타냅니다

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

로그인 후 복사

person.vue

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

로그인 후 복사

에서 params 매개변수를 수신합니다

효과는 다음과 같습니다 Vue3 라우팅을 구성하고 경로 점프를 수행하고 매개변수를 전달하는 방법은 무엇입니까?

6. 하위 구성 요소(stu1, stu2 구성 요소)를 추가합니다. ) 학생 경로

하위 구성 요소의 경로에는 다음이 포함되지 않습니다. / 프로그래밍 방식 라우팅을 통해 점프할 수 있습니다

to="/student/stu1" 점프하려면 전체 경로를 사용해야 합니다

효과 디스플레이

위 내용은 Vue3 라우팅을 구성하고 경로 점프를 수행하고 매개변수를 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!