Vue-Router2.X에서 다중 라우팅 구현 구현

이제 Vue-Router2.X의 다양한 라우팅 구현 방법을 요약하여 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

참고: vue-router 2는 Vue2.x 버전에만 적용 가능합니다. 아래에서는 vue-router 2를 사용하여 vue2.0 기반의 라우팅 기능을 구현하는 방법에 대해 설명합니다.

npm을 사용하여 설치하는 것이 좋습니다.

npm install vue-router

1. 라우팅 사용

main.js에서 라우팅 기능

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)

1을 명시적으로 설치해야 합니다. 여기서는 다른 파일에서 가져오기

import index from './components/index.vue'
import hello from './components/hello.vue'

2를 사용합니다. 라우팅

const routes = [
 { path: '/index', component: index },
 { path: '/hello', component: hello },
]

3. 라우터 인스턴스를 생성한 다음 경로 구성

const router = new VueRouter({
 routes
})

4을 전달합니다. 라우터 구성 매개변수를 통해 경로를 삽입하여 전체 애플리케이션이 라우팅 기능을 갖게 합니다

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

위 구성 후 경로와 일치하는 구성 요소는 App.vue -view>의 975b587bf85a482ea10b0a28848e78a47e1cf51b8fa6ce06bf5c00374777c4fc

vue-router 2에서는 b988a8fd72e5e0e42afffd18f951b277d625018d6d57dc2163f3a71531b24864 6. 현재 경로의 경로에 해당하는 라우팅 정보 객체

1.$route.path 문자열은 항상 "/foo/bar"와 같은 절대 경로로 해석됩니다.

2.$route.params

동적 조각과 전체 일치 조각을 포함한 키/값 객체입니다. 라우팅 매개변수가 없으면 빈 객체입니다.

3.$route.query

URL 쿼리 매개변수를 나타내는 키/값 개체입니다. 예를 들어 /foo?user=1 경로의 경우 $route.query.user == 1이거나 쿼리 매개변수가 없는 경우 빈 객체입니다.

4.$route.hash

현재 경로의 해시 값(# 제외), 해시 값이 없으면 빈 문자열입니다.

5.$route.fullPath

쿼리 매개변수 및 해시의 전체 경로를 포함한 구문 분석 완료 후의 URL입니다.

6.$route.matched

현재 경로의 모든 중첩 경로 조각에 대한 라우팅 기록을 포함하는 배열입니다. 경로 레코드는 경로 구성 배열(및 하위 배열)에 있는 객체의 복사본입니다.

위 내용을 바탕으로 리디렉션, 중첩 라우팅, 지연 로딩을 포함하는 main.js는 다음과 같습니다.

const routes = [
 { path: '/index', component: resolve => require(['./index.vue'], resolve) },
 { path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]

위 내용은 모두에게 도움이 되기를 바랍니다. 미래.

관련 기사: jquery/bootstrap 프로젝트에 vue를 통합하는 방법은 무엇입니까?

페이지 번호를 클릭하여 페이지 내용을 변경하여 vue.js에서 페이징 구현

vue2.0 구성 요소에서 가치 전달 및 통신을 구현하는 방법

위 내용은 Vue-Router2.X에서 다중 라우팅 구현 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!