vue-router を使用して単純なナビゲーション機能を完了する-jsチュートリアル-php.cn

vue-router を使用して単純なナビゲーション機能を完了する

不言

リリース： 2018-06-29 11:33:04

オリジナル

1737 人が閲覧しました

この記事では、簡単なナビゲーション機能を完成させるための vue-router の使用法を主に紹介します。必要な友人はそれを参照できるように共有します。

vue-router は、Vue によって公式に提供されるセットです。 js 専用のルーティングツールライブラリ。この記事では、vue-router を使用して簡単なナビゲーション機能を完成させる方法を主に紹介しますので、必要な方は参考にしてください

vue-router は、Vue.js によって公式に提供されている専用のルーティングツールライブラリのセットです

インストールコマンドは次のとおりです。

npm i vue-router -D

ログイン後にコピー

vue-router インスタンスは Vue プラグインです。Vue グローバル参照の Vue.use() を介して Vue インスタンスに接続する必要があります。

私たちのプロジェクトでは、main.js がデフォルトのプログラムエントリファイルであり、すべてのグローバル設定はこのファイルで実行されます。

main.jsに以下の参照を追加します

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

ログイン後にコピー

これでvue-routerの最も基本的なインストール作業は完了です。

次に実装したい機能は次のとおりです

ホームページには、ショッピングカートとパーソナルセンターの2つのリンクがあります
異なるコンテンツを表示するには、異なるリンクをクリックしてください

まず、srcディレクトリに2つのリンクを作成しますコンポーネントファイル: Cart.vue Me.vue

新しく作成された 2 つのコンポーネントファイルの内容は、一時的に同じ構造になります

<template>
 <!-- 这个p里面的内容可设置不同以区分 -->
 <p>购物车</p>
</template>
<script>
export default {}
</script>
<style lang="scss"></style>

ログイン後にコピー

次のステップは、メインのルートとこれらのコンポーネント間のルーティングを定義することです。 js ファイルのルールに一致します。

VueRouterの定義は非常に簡単です: VueRouterインスタンスを作成し、コンポーネントタイプへのルーティングパスを指定します

以下のコード(main.js)に示すように

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import VueRouter from &#39;vue-router&#39;
//引入创建的两个组件
import Cart from &#39;./Cart.vue&#39;
import Me from &#39;./Me.vue&#39;
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:&#39;history&#39;,
 base: &#39;__dirname&#39;,
 routes:[
 //将页面组件与path指令的路由关联
 {path:&#39;/cart&#39;,component:Cart},
 {path:&#39;/me&#39;,component:Me}
 ]
})
new Vue({
 el: &#39;#app&#39;,
 //将路由实例添加到Vue实例中去
 router,
 render: h => h(App)
})

ログイン後にコピー

ルーティング関連を抽出できます上記のコードを取り出して、main.js ファイルの内容が長くなるのを防ぐために、別の Routes.js ファイルに置きます。

新しい設定フォルダーを作成し、そこにroutes.jsファイルを追加します。

その後、routes.js コードは次のようになります

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
//引入创建的两个组件
import Cart from &#39;../Cart.vue&#39;
import Me from &#39;../Me.vue&#39;
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:&#39;history&#39;,
 base: &#39;__dirname&#39;,
 routes:[
 //将页面组件与path指令的路由关联
 {path:&#39;/cart&#39;,component:Cart},
 {path:&#39;/me&#39;,component:Me}
 ]
})
export default router;

ログイン後にコピー

そして、main.js ファイルのコードは次のように削減されます:

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./config/routes&#39;
new Vue({
 el: &#39;#app&#39;,
 //将路由实例添加到Vue实例中去
 router,
 render: h => h(App)
})

ログイン後にコピー

vue-router は 2 つのコマンドタグを提供します

< router-view>: レンダリングパスと一致するビューコンポーネント
: ルーティング機能を使用してユーザーがアプリケーション内を移動できるようにします

上記 2 つのコマンドタグを使用すると、プログラムの入り口で App.vue に入ることができます対応するコードを記述します:

<template>
 <p id="app">
 <p class="tabs">
  <ul>
  <li>
   <router-link to ="/cart">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link to ="/me">
   <p>个人中心</p>
   </router-link>
  </li>
  </ul>
 </p>
 <p class="content">
  <!-- 使用 router-view 渲染视图 -->
  <router-view></router-view>
 </p>
 </p>
</template>
<script>
export default {
 name: "app"
};
</script>
<style lang="scss"></style>

ログイン後にコピー

この時点で、上記のコードは期待どおりの機能を実現しています。

次に、="/cart" へのパスが実際に {path:'/cart',component:Cart} で定義されていることがわかります。変更する必要がある場合は、これらが必要です。二全ての箇所を同時に変更します(他の箇所でも使用されている場合はさらに変更します) {path:'/cart',component:Cart}定义过了，如果需要修改，就得需要这两个地方同时修改（如果有其他地方用的就改动的更多）

那么直接将{path:'/cart',component:Cart}中的路径取出来岂不是很好。

这个时候我们的 vue-router提供了一种隐式的路由引用方式，称之为 —— 命名路由

简单来说就是通过路由的名称引用来取代Url

于是VueRouter的配置代码改为如下：

const router = new VueRouter({
 mode:&#39;history&#39;,
 base: &#39;__dirname&#39;,
 routes:[
 //将页面组件与path指令的路由关联
 {name:&#39;cart&#39;,path:&#39;/cart&#39;,component:Cart},
 {name:&#39;me&#39;,path:&#39;/me&#39;,component:Me}
 ]
})

ログイン後にコピー

这样我们在 <router-link >

それなら{path:'/cart',component:Cart内のパスを直接取り出したら良いんじゃないでしょうか} 。

現時点では、vue-router は、名前付きルートと呼ばれる暗黙的なルート参照メソッドを提供します

簡単に言えば、Url をルートの名前参照で置き換えます

そのため、VueRouter の設定コードは次のように変更されます。

  <li>
   <router-link :to ="{name:&#39;cart&#39;}">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link :to ="{name:&#39;me&#39;}">
   <p>个人中心</p>
   </router-link>
  </li>

ログイン後にコピー

このように、v-bind を使用して <router-link > の to 属性を Vue インスタンスにバインドし、名前を通じて URL を直接取得します。

そこで、App.vueのリンク部分のコードを以下のように変更します

  <li>
   <router-link :to ="{name:&#39;cart&#39;}" tag="span">
   <p>购物车</p>
   </router-link>
  </li>

ログイン後にコピー

この時点でvue-routerを使った簡易ナビゲーション機能は完成です

手順

デフォルトでは正しいリンクを持つ < ;a> タグとして表示されますが、

rrreee

などのタグ属性を設定することで他のタグを生成することもできます。上記はこの記事の全内容です。皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語に注目してください。