Vue3의 라우팅에 대해 이야기하고 라우팅 구성 방법을 간략하게 분석해 보겠습니다.

이 글에서는 Vue3의 라우팅을 안내하고 라우팅의 기본 구성, 동적 라우팅 구성, 라우팅 모드, 라우팅 리디렉션 등에 대해 설명합니다. 도움이 되길 바랍니다.

【관련 추천: "vue.js tutorial"】

라우팅 기본 구성

1.routers.ts 파일을 생성합니다

3. .ts 구성요소를 소개하고 경로를 구성합니다.

npm install vue-router@next --save

4. 라우팅 파일을 main.ts의 vue에 마운트합니다.

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;

5. 라우팅을 사용하는 컴포넌트가 router-view 컴포넌트나 router-link

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');

를 통해 router-link를 마운트한 후 해당 컴포넌트에 해당하는 페이지 경로에 지정된 경로만 입력하면 점프가 완료됩니다. Router-link는 레이블 점프 형태로 라우팅을 구현합니다.

동적 라우팅 구성

routes.ts에서 다음과 같이 라우팅을 구성하고, /:aid를 통해 동적 라우팅을 구성합니다.

<template>
  <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
  <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>

라우터 링크를 통해 점프할 때 템플릿 문자열과 콜론 + to가 필요합니다.

//配置路由
const router = createRouter({

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

this.$route.params를 통해 동적 경로가 전달한 값을 가져옵니다.

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

GET과 유사한 값 전송을 구현하려면 다음 방법을 사용할 수 있습니다.

1 경로를 일반 경로로 구성합니다.

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

2. 라우터 링크가 물음표 형태로 점프합니다.

const router = createRouter({

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

3. this.$route.query를 통해 get 값을 얻습니다.

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

경로 프로그래밍 방식 탐색(JS 점프 경로)

이것을 통해 지정하세요.$router.push.

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

값 전송 가져오기를 구현하려면 다음 방법을 사용할 수 있습니다.

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

동적 라우팅은 다음과 같은 방법을 사용해야 합니다.

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

라우팅 모드

해시 모드

해시 모드의 일반적인 특징은 페이지 경로에 파운드 기호가 포함되어 있다는 것입니다.

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

HTML5 기록 모드

createWebHistory를 소개합니다.
라우터 구성 항목의 기록 속성이 createWebHistory()로 설정되어 있습니다.

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

참고: HTML5 기록 모드를 켠 후 서버에 게시할 때 의사 정적을 구성해야 합니다.

의사 정적 구성 방법:

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85% 8D %E7%BD%AE%E4%BE%8B%E5%AD%90

이름이 지정된 경로

일반 상황

경로를 정의할 때 이름 속성을 구성하세요

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

Incoming object Jump

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

GET

라우트 정의 시 name 속성을 설정하여 값을 전달

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

쿼리를 포함한 객체에 전달

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

매개변수를 포함한 객체에 전달

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

프로그래밍 방식 라우팅

은 위의 방법과 매우 유사합니다.

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

별칭도 배열일 수 있습니다.

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

동적 라우팅 형태.

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

Nested Routing

Nested Routing의 적용 시나리오는 일반적으로 탐색 모음에 있습니다.

중첩 라우팅 정의

• { 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 }
    ]
  }

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 소개

를 방문하세요! !

위 내용은 Vue3의 라우팅에 대해 이야기하고 라우팅 구성 방법을 간략하게 분석해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!