Vue-Router2.X에서 다중 라우팅 구현 구현-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-06 16:03:13

원래의

1613명이 탐색했습니다.

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

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

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

npm install vue-router

로그인 후 복사

1. 라우팅 사용

main.js에서 라우팅 기능

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import App from &#39;./App.vue&#39;
Vue.use(VueRouter)

로그인 후 복사

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

import index from &#39;./components/index.vue&#39;
import hello from &#39;./components/hello.vue&#39;

로그인 후 복사

2를 사용합니다. 라우팅

const routes = [
 { path: &#39;/index&#39;, component: index },
 { path: &#39;/hello&#39;, component: hello },
]

로그인 후 복사

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

const router = new VueRouter({
 routes
})

로그인 후 복사

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

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

로그인 후 복사

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

App.vue는 다음과 같이 작성해야 합니다.

<template>
 <p id="app">
  <router-view></router-view>
 </p>
</template>
index.html里呢要这样写：
<body>
 <p id="app"></p>
</body>

로그인 후 복사

이렇게 하면 렌더링된 페이지가 앱 ID를 사용하여 p에 마운트됩니다.

2. 리디렉션 리디렉션

const routes = [
 { path: &#39;/&#39;, redirect: &#39;/index&#39;},  // 这样进/ 就会跳转到/index
 { path: &#39;/index&#39;, component: index }
]

로그인 후 복사

3. 중첩 라우팅

const routes = [
 { path: &#39;/index&#39;, component: index,
  children: [
   { path: &#39;info&#39;, component: info}
  ]
  }
]

로그인 후 복사

정보 구성 요소는 /index/info

4를 통해 액세스할 수 있습니다. 게으름과 함께 로드하면 모든 구성 요소를 한 번에 로드하지 않고 액세스할 때만 해당 구성 요소를 로드합니다. 구성 요소가 많은 애플리케이션의 경우 첫 번째 로딩 속도가 향상됩니다.

vue-router 2에서는 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: &#39;/index&#39;, component: resolve => require([&#39;./index.vue&#39;], resolve) },
 { path: &#39;/hello&#39;, component: resolve => require([&#39;./hello.vue&#39;], resolve) },
]

로그인 후 복사

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

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

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

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

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