Vue-Router2がルーティング機能を実装した例の説明-jsチュートリアル-php.cn

Vue-Router2がルーティング機能を実装した例の説明

小云云

リリース： 2018-05-18 15:41:58

オリジナル

1692 人が閲覧しました

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'

ログイン後にコピー

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 は次のように記述する必要があります:

<template>
 <p id="app">
  <router-view></router-view>
 </p>
</template>

ログイン後にコピー

index.html は次のように記述する必要があります:

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

ログイン後にコピー

これにより、レンダリングされたページがアプリの ID で p にマウントされます。

2. リダイレクトリダイレクト

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

ログイン後にコピー

3. ネストされたルーティング

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

ログイン後にコピー

/index/info を通じて情報コンポーネントにアクセスできます

4. 遅延読み込みを通じて、すべてのコンポーネントは一度にロードされません。すべてロードされますが、そのコンポーネントにアクセスすると、その 1 つだけがロードされます。多くのコンポーネントを含むアプリケーションの場合、最初の読み込み速度が向上します。

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>

ログイン後にコピー