ホームページ >ウェブフロントエンド >jsチュートリアル >Vue-Router2がルーティング機能を実装した例の説明
Vue-Router2がルーティング機能を実装した例の説明
- 小云云オリジナル
- 2018-05-18 15:41:581711ブラウズ
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 つだけがロードされます。多くのコンポーネントを含むアプリケーションの場合、最初の読み込み速度が向上します。
5.
vue-router 1 では、使用されるバージョンは
vue-router 2 では、
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="'home'">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
関連推奨事項:
以上がVue-Router2がルーティング機能を実装した例の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。