이 글에서는 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');
동적 라우팅 구성routes.ts에서 다음과 같이 라우팅을 구성하고, /:aid를 통해 동적 라우팅을 구성합니다.
라우터 링크를 통해 점프할 때 템플릿 문자열과 콜론 + to가 필요합니다.<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>로그인 후 복사
this.$route.params를 통해 동적 경로가 전달한 값을 가져옵니다.//配置路由 const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Home , alias: '/home' }, { path: '/news', component: News }, { path: '/user', component: User }, { path: '/newscontent/:aid', component: NewsContent }, ], })로그인 후 복사
GET과 유사한 값 전송을 구현하려면 다음 방법을 사용할 수 있습니다.<ul> <li v-for="(item, index) in list" :key="index"> <router-link :to="`/newscontent/${index}`"> {{item}}</router-link> </li> </ul>로그인 후 복사
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} }) }로그인 후 복사
HTML5 기록 모드this.$router.push({ path: '/home/123', // query: {aid: 14} })로그인 후 복사
const router = createRouter({ history: createWebHashHistory(), routes: [ ..., ], })
일반 상황의사 정적 구성 방법:
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: [ ... ], })
{ path: '/news', component: News,name:"news" }
<router-link :to="{name: 'news'}">新闻</router-link>
{ path: '/newscontent', component: NewsContent, name: "content" },
<li v-for="(item, index) in list" :key="index"> <router-link :to="{name: 'content',query: {aid: index}}"> {{item}}</router-link> </li>
{ path: '/userinfo/:id', name: "userinfo", component: UserInfo }
경로 리디렉션<router-link :to="{name: 'userinfo',params: {id: 123}}">跳转到用户详情</router-link>로그인 후 복사
<button @click="this.$router.push({name: 'userinfo',params: {id: 666}})">点击跳转</button>
별칭도 배열일 수 있습니다.{ path: '', redirect: "/home" }, // 路由重定向 { path: '/home', component: Home },로그인 후 복사
동적 라우팅 형태.{ path: '/user', component: User, alias: '/people' }로그인 후 복사
Nested Routing의 적용 시나리오는 일반적으로 탐색 모음에 있습니다.Nested Routing{ 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 } ] }
위 내용은 Vue3의 라우팅에 대해 이야기하고 라우팅 구성 방법을 간략하게 분석해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!