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

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

ログイン後にコピー

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

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

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

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

ログイン後にコピー

/index/info

4. rreee 怠け者とロードする場合、すべてのコンポーネントを一度にロードするのではなく、アクセスしたときにそのコンポーネントのみをロードします。多くのコンポーネントを含むアプリケーションの場合、最初の読み込み速度が向上します。

vue-router 2 では、がバージョン 1 の a タグを置き換えるために使用されます

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

ログイン後にコピー

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) },
]

ログイン後にコピー

上記は、すべての人にとって役立つことを願っています。未来。関連記事:

vue を jquery/bootstrap プロジェクトに統合するには?

ページ番号をクリックしてページコンテンツを変更することで、vue.js にページングを実装します

vue2.0 コンポーネントで値の転送と通信を実装する方法

以上がVue-Router2.Xで複数のルーティング実装を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。