VueRouter 기본 검토

한눈에 보는 하이라이트

마인드 맵 링크 : https://www.processon.com/view/link/602f374e6376891d5f86f8d1

VueRouter의 기본 사용

HTML
1. 라우팅 구성 요소에 대한 자리 표시 자 만들기

<!-- 路由匹配到的组件将渲染在这里 -->
<router-view>

2. 링크 만들기

<!-- 通过传入 `to` 属性指定链接 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

JS
1. 소개

import Vue from "vue"
import VueRouter from "vue-router"

2. 라우팅 플러그인 등록

Vue.use(VueRouter)

3. 라우팅 규칙 정의

const routes = [
	{
    
    
		path:"/",
		name:"index",
		component: Index
	}
]

4. 라우팅 개체 만들기

const router = new VueRouter({
    
    
	routes
})

5. Vue 인스턴스에 라우터 개체 등록

new Vue({
    
    
  router,
  render: h => h(App)
}).$mount("#app")

라우터를 삽입 한 후 this.$router액세스 라우터의 구성 요소를 this.$route통해 현재 경로에 액세스 할 수도 있습니다.

---

$ 라우터

라우터 인 vueRouter 인스턴스는 Vue 루트 인스턴스의 라우터 구성을 통해 전달됩니다.

소품

속성	유형	기술
앱	인스턴스보기	라우터가 구성된 Vue 루트 인스턴스
방법	끈	경로에서 사용하는 모드
currentRoute	노선	현재 경로 (예 : $ route)에 해당하는 라우팅 정보 개체
START_LOCATION	노선	라우팅 개체의 형식, 즉 라우팅이 시작되는 위치로 초기 라우팅 주소를 표시합니다. 내비게이션 가드에서 초기 내비게이션 구분에 사용

행동 양식

방법	기술	비고
beforeEach
beforeResolve
afterEach
푸시
바꾸다
가다
뒤
앞으로
getMatchedComponents
결의
addRoutes
addRoute
addRoute
getRoutes
onReady
onError

---

$ route

현재 경로 개체는 현재 활성화 된 경로의 상태 정보를 나타냅니다. 변경할 수 없으며 탐색이 성공할 때마다 새 개체가 생성됩니다.

소품

속성	유형	기술
통로	끈	현재 경로에 해당하는 경로는 항상 " /foo/bar" 와 같은 절대 경로로 확인됩니다.
매개 변수	목적	동적 조각 및 완전 일치 조각을 포함하는 키 / 값 개체입니다. 예 : 패턴 /user/:username, 일치하는 경로 /user/evan,$route.params ={ username: 'evan' }
질문	목적	URL 쿼리 매개 변수를 나타내는 키 / 값 개체입니다. 예를 들어 경로 /foo?user=1의 경우$route.query.user == 1
해시시	끈	현재 경로의 해시 값 (# 포함)
fullPath	끈	쿼리 매개 변수 및 해시의 전체 경로를 포함한 구문 분석 된 URL
일치	정렬	현재 경로의 모든 중첩 경로 조각의 라우팅 레코드를 포함하는 배열
이름	끈	현재 경로의 이름
redirectedFrom	끈	리디렉션이있는 경우 리디렉션이 시작된 경로의 이름입니다.

---

동적 라우팅

사용하다

특정 패턴과 일치하는 모든 경로는 모두 동일한 구성 요소에 매핑됩니다. 예를 들어, 상품 상세 페이지는 상세 구성 요소를 사용합니다.

const router = new VueRouter({
    
    
  routes: [
    // 动态路径参数 以冒号开头
    {
    
     
    	path: '/detail/:id', 
    	component: Detail
    }
  ]
})

경로 매개 변수 가져 오기

• $route.params인수를 통해 직접 . "경로 인수"콜론 :표시. 경로가 일치하면 매개 변수 값이 this. $ route.params로 설정되며 각 구성 요소에서 사용할 수 있습니다.

방법	일치 경로	$ route.params
/ user / : 사용자 이름	/ user / evan	{사용자 이름 : 'evan'}
/ user / : username / post / : post_id	/ user / evan / post / 123	{사용자 이름 : 'evan', post_id : '123'}

• 소품을 통해받습니다. 라우팅 구성에서 설정해야합니다.props:true

const router = new VueRouter({
    
    
  routes: [
    {
    
     
    	path: '/detail/:id', 
    	component: Detail,
    	props: true //通过props把参数传递给组件
    }
  ]
})

라우팅 매개 변수 변경에 응답

注意！当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。这意味着组件的生命周期钩子不会再被调用。
需要对路由参数的变化作出响应，可以通过以下两种方式：

1. watch (监测变化) $route 对象

const User = {
    
    
  template: '...',
  watch: {
    
    
    $route(to, from) {
    
    
      // 对路由变化作出响应...
    }
  }
}

2. 使用 beforeRouteUpdate 进行导航守卫

const User = {
    
    
  template: '...',
  beforeRouteUpdate (to, from, next) {
    
    
      // 对路由变化作出响应...
      // 记得要调用 next()
  }
}

---

路由嵌套

需要进行路由嵌套，在路由规则中使用 children 配置即可：

const router = new VueRouter({
    
    
  routes: [
    {
    
     path: '/user/:id', component: User,
      children: [
        {
    
    
          // 当 /user/:id/profile 匹配成功，UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
    
    
          // 当 /user/:id/posts 匹配成功，UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        },
        {
    
     
	        // 提供一个【空的】子路由，当 /user/:id 匹配成功，UserHome 会被渲染在 User 的 <router-view> 中
	        // 如果没有提供这个空的子路由，User 的出口不会渲染任何东西。
        	path: '', 
        	component: UserHome
        }
      ]
    }
  ]
})

---

编程式导航

• router.push
• router.replace
• router.go

router.push(location, onComplete?, onAbort?)

参数可以是一个字符串路径，或者一个描述地址的对象

// 字符串
router.push('home')

// 对象
router.push({
    
     path: 'home' })

// 命名的路由（可以使用 name 而不用 path）
router.push({
    
     name: 'user'}) 

// 命名的路由，带参数
router.push({
    
     name: 'user', params: {
    
     userId: '123' }})  // => /user/123 

// 带查询参数
router.push({
    
     path: 'register', query: {
    
     plan: 'private' }}) // => /register?plan=private

注意：如果提供了 path，params 会被忽略。

const userId = '123'

// name + params
router.push({
    
     name: 'user', params: {
    
     userId }}) // -> /user/123

// 带有手写参数的 path
router.push({
    
     path: `/user/${
      
      userId}` }) // -> /user/123

// 错误使用：这里的 params 不生效
router.push({
    
     path: '/user', params: {
    
     userId }}) // -> /user 

router.replace(location, onComplete?, onAbort?)

与 router.push 基本相同，唯一的不同就是，它不会向 history 添加新记录，而是替换当前记录。

router.go(n)

参数是一个整数，意思是在 history 记录中向前或者后退多少步。类似 window.history.go(n)

---

VueRouter 路由守卫

1）全局级别

前置守卫：beforeEach

解析守卫：beforeResolve

导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用

后置钩子：afterEach

不会接受 next 函数也不会改变导航本身。

2）路由级别

前置守卫：beforeEnter

在路由规则中给特定路由进行配置。

 const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
    
    
        // ...
      }
    }
  ]
})

3）组件级别

beforeRouteEnter

구성 요소 인스턴스가 생성되지 않았으며 구성 요소 인스턴스를 가져올 수 없습니다 this. 하지만 다음번 콜백을 통해 컴포넌트 인스턴스를 얻을 수 있습니다. (내비게이션이 확인되면 콜백이 실행되고, 컴포넌트 인스턴스는 콜백 메소드의 매개 변수로 사용됩니다. beforeRouteEnter 만 콜백 전달을 지원합니다.)

beforeRouteEnter (to, from, next) {
    
    
  next(vm => {
    
    
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate

현재 경로가 변경되었지만 구성 요소가 재사용 될 때 호출됩니다.

beforeRouteLeave

탐색이 구성 요소의 해당 경로를 벗어날 때 호출되며 현재 구성 요소 인스턴스를 계속 가져올 수 있습니다. this

4) 매개 변수 분석

router.***((to, from, next) => { ...})

• to : 경로, 입력 할 대상 경로 개체
• from : 라우터, 현재 내비게이션이 나가려는 경로
• 다음 : 함수,이 메서드를 호출하여이 후크를 해결합니다.