집 > 기사 > 웹 프론트엔드 > Vue-Router2는 라우팅 기능 예시 설명을 구현합니다.

Vue-Router2는 라우팅 기능 예시 설명을 구현합니다.

小云云원래의: 2018-05-18 15:41:581638검색

vue-router는 Vue.js의 공식 라우팅 플러그인으로 vue.js와 긴밀하게 통합되어 있으며 단일 페이지 애플리케이션을 구축하는 데 적합합니다. Vue의 단일 페이지 애플리케이션은 라우팅 및 구성 요소를 기반으로 합니다. 라우팅은 액세스 경로를 설정하고 경로 및 구성 요소를 매핑하는 데 사용됩니다. 기존 페이지 애플리케이션은 일부 하이퍼링크를 사용하여 페이지 전환 및 점프를 수행합니다. vue-router 단일 페이지 애플리케이션에서는 경로 간 전환, 즉 구성 요소 전환이 수행됩니다.

참고: 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'

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

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

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

const router = new VueRouter({
 routes
})

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

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

const app = new Vue({
 router,
 render: h => h(App)
}).$mount('#app')</p>
<p>index.html은 다음과 같이 작성해야 합니다.</p>
<pre class="brush:php;toolbar:false"><template>
 <p id="app">
  <router-view></router-view>
 </p>
</template>

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

2. Redirect Redirect

<body>
 <p id="app"></p>
</body>

3. Nested Routing

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

/index/info

를 통해 info 컴포넌트에 접근할 수 있습니다. Lazy loading

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

Lazy loading을 통해 모든 컴포넌트가 한꺼번에 로드되지 않습니다. 모두 로드되지만 해당 구성 요소에 액세스하면 해당 항목만 로드됩니다. 구성 요소가 많은 애플리케이션의 경우 첫 번째 로딩 속도가 향상됩니다.

vue-router 1에서 사용된 버전은

vue-router 2에서는 1 a 태그

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

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는 다음과 같습니다.

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home" rel="external nofollow" >Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="&#39;home&#39;">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="&#39;home&#39;">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: &#39;home&#39; }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: &#39;user&#39;, params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: &#39;register&#39;, query: { plan: &#39;private&#39; }}">Register</router-link>

Vue-Router2는 라우팅 기능 예시 설명을 구현합니다.

관련 기사