목차
1. 중첩 라우팅
1. 경로 정의
(1) 라우팅 구성을 통해 라우팅 수준에서 구성 요소 매핑의 중첩 수준을 정의하고 children을 사용하여 하위 경로<를 정의합니다. /span>
(2)참고: path 하위 경로는 로 끝나지 않습니다. / 처음에 / 라고 쓰면 1단계 경로로 승격됩니다
2. 코드 예시
(1) App.vue 문건
<h1>
<router-link to="/home">主页</router-link> |
<router-link to="/news">新闻</router-link>
</h1>
<router-view />(2) 라우터 폴더 아래 index.js 파일
import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
import Hot from "../views/news/hotPage.vue"
import Tnews from "../views/news/TnewsPage.vue"
import News from "../views/news/NewsPage.vue"
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/news",
name: "news",
component: News,
children: [
{
path: "hot", //注意路径没有/
component: Hot,
},
{
path: "tnews", //注意路径没有/
component: Tnews,
},
],
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
NewsPage.vue 문건
<nav>
<router-link to="/news/hot">热点新闻</router-link> |
<router-link to="/news/tnews">国际新闻</router-link>
</nav>
<router-view />3. 리디렉션
경로의 각 레이어를 리디렉션할 수 있습니다.
const routes = [
{
path: "/",
redirect:"Home",//对应component，注意Home要引号引起来
},
{
path: "/news",
name: "news",
component: News,
children:[
{
path:'',
redirect:"Hot",
},
{
path:'hot',
component:Hot,
},
{
path:'tnews',
component:Tnews,
},
],
},
];2. 지연 로딩
1. 사유
①문제: 프로젝트 빌드를 위해 라우팅을 정의하고 패키징하기 전에 각 구성 요소를 가져오면 js 패키지가 매우 커져 페이지 로딩에 영향을 미칩니다.
②해결 방법: 다른 경로를 배치합니다. 구성 요소는 서로 다른 코드 블록으로 나누어지고 해당 경로에 액세스할 때만 해당 구성 요소가 로드되므로 더욱 효율적입니다.
③Format: ()=>import("vue file path" )
2. 코드 예시
const routes = [
{
path: "/",
redirect: { name: "Home" }, //重定向也要改格式
},
{
path: "/home",
name: "Home",
component: () => import("@/views/HomePage.vue"),
},
];3. 내비게이션 가드
기능: 점프하거나 취소하여 탐색을 보호합니다. 일부 페이지는 들어가기 전에 권한 확인이 필요합니다.
다양한 방법: 전역, 단일 경로 전용, 구성 요소 수준
1. 글로벌 프론트가드
(1) 시나리오: 경로가 점프를 시작하기 전(점프가 수행되지 않은 경우) 반환 함수에서 next()를 수동으로 호출하여 경로를 해제해야 합니다.
(2) 형식
router.beforeEach((to,from,next)=>{
})①to: 진입하려는 대상 라우팅 객체
②from: 현재 내비게이션이 떠날 경로
③next( 39;/' ;): 해결 후크를 호출해야 합니다. 실행 효과는 다음 메소드의 호출 매개변수에 따라 다릅니다.
- next(): 라우팅 점프를 허용하고 원래 대상 페이지로 점프합니다.
- next(false): 현재 탐색을 중단하고, 브라우저 URL이 변경되면 URL은 from 경로에 해당하는 주소로 재설정됩니다.
- next('/'), next({ path: '/' }): 경로 리디렉션, 모든 [<router-link>에 사용되는 항목을 다음 속성으로 전달할 수 있습니다. value] 또는 router.push 옵션
(3)주의
특정 탐색 가드에서 다음 함수가정확히 한 번 호출되는지 확인해야 합니다.
①코드 예시 1
router.beforEach((to,form,next)=>{
//如果未登录且目标不是登录页，则重定向到登录页，且return掉函数
if(to.name !== 'Login' && !isAuthenticated) return next({name:'Login'})
//放行路由
next()
})②코드 예시 2
router.beforeEach((to,from,next)=>{
console.log("to",to);
console.log(from);
next()
})2. 글로벌 후방 가드
(1) 시나리오 : 페이지 진입 후 가드는 다음 기능이 없다는 점에서 프론트 가드와 다르기 때문에 네비게이션이 변경되지 않습니다.
(2) 형식
router.afterEach((to, from) => {
// ...
})①to: 현재 내비게이션이 진입하는 대상 경로 객체
②from: 현재 내비게이션이 곧 떠나려는 경로
3. 메타메타정보
설명: 브라우저의 각 페이지 제목
{
path:'/home',
name:"Home",
meta:{//元信息
title:'主页'
},
component:()=>import("@/views/HomePage.vue"),
},4. 수명주기
도식적인 수명주기
1.설명
(1)beforeCreate()
주기 노드: 구성 요소 인스턴스가 생성될 때 구성 요소의 속성이 적용되기 전
참고: 현재 인스턴스, DOM 렌더링 없음
인스턴스 생성 전에 실행되는 후크 이벤트
(2) Created()
Cycle 노드: 구성 요소 인스턴스가 완전히 생성되고 속성이 바인딩되었지만 실제 DOM은 아직 생성되지 않았습니다.
참고: 현재는 Dada, 메소드 등과 같은 인스턴스 데이터에만 액세스할 수 있습니다.
(3)beforeMount()
주기 노드: DOM이 렌더링되려고 합니다.
참고: 현재는 인스턴스 데이터에만 액세스할 수 있습니다. , 예: 데이터, 메소드 등
(4) Mounted()
Cycle 노드: DOM 렌더링 종료
참고: 이 때 인스턴스 데이터와 DOM에 액세스할 수 있습니다. 페이지에서< /span>
(5)beforeUpdate()
주기 노드: 구성요소 데이터가 업데이트되기 전에 DOM이 다시 렌더링되지 않습니다.
(6) update()
주기 노드: 구성요소 데이터가 업데이트되기 전에 DOM이 다시 렌더링되었습니다.
(7) activate()
[keep-alive 독점], 캐시된 구성 요소가 활성화되면 후크 기능
(8)deactivated()
[keep-alive 독점], 캐시된 구성 요소가 활성화되지 않은 경우 후크 기능
(9)beforeDestroy()
주기 노드: 구성 요소 인스턴스가 파괴되기 전
(10)destroyed()
주기 노드: 구성 요소가 파괴된 후
2. 실행 순서
3. 예시
created () {
console.log('新闻页面创建');
},
destroyed () {
console.log('新闻页面销毁');
},5. 연결 유지 구성 요소 캐시(keep-alive)
1. 소개
<router-view>를 사용하여 페이지를 전환하면 구성 요소가 삭제되고 전체 수명 주기를 거치게 됩니다.
그러나 때로는 다시 구성하는 대신 구성 요소 데이터를 저장해야 하는 경우도 있습니다. -입력될 때마다 획득됩니다. 페이지 렌더링을 위한 데이터
<keep-alive>
<router-view />
</keep-alive>2. 속성
①include: 문자열 또는 정규식, 이름이 일치하는 구성 요소가 캐시됩니다.
②exclude: 문자열 또는 정규식, 이름이 일치하는 구성 요소는 캐시되지 않습니다.
③max: 숫자, 캐시할 수 있는 최대 구성 요소 인스턴스 수입니다.
<keep-alive include="HomePage">
<router-view />
</keep-alive>3. 코드 예시
<!-- Home.vue -->
<template>
<div>
<nav>
<router-link to="/home/index">首页</router-link>
<router-link to="/home/mine">我的</router-link>
</nav>
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>