vue-cliでルーターを使用する方法

この記事では主に vue-cli ルーターの基本的な使い方を詳しく紹介しますので、興味のある方は参考にしていただければ幸いです。

1. srcディレクトリに新しいrouterディレクトリを作成し、index.jsを作成します

import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from '@/components/goods/goods';

Vue.use(VueRouter);

export default new VueRouter({
 routes: [
  {
   path: '/',
   redirect: {name: 'goods'}
  }
});

コード内の@はwebpack.base.conf.jsで変更された設定であり、ファイルを導入することが目的です。毎回コンポーネントなどを書くのは面倒なので@で代用してください

 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 }

2. エントリーファイルmain.jsに導入してノードにマウントします

import router from './router';

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: &#39;<App/>&#39;,
 components: { App }
});

3. たとえば、.vue ファイルで使用されるアプリで、クリックしてルートを切り替えると、コンテンツがルータービューコンテナーに表示されます

<template>
 <p id="app">
  <p class="tab">
    <router-link to="/goods" >商品</router-link>
  </p>
  <router-view></router-view>
 </p>
</template>

などの場合、ルートを切り替えるには 3 回のクリックがあります。商品、販売者、コメントを設定するには、現在クリックされているノードを設定します。 スタイルを設定できます

.router-link-active {color: rgb(139,0,0);}

関連する推奨事項:

vue-routerルーティングの基本的なインスタンス共有

ルーター解決ページがクロスモジュールの下にジャンプします

vueルーターはTmallの下部ナビゲーションバーの共有例を模倣します

以上がvue-cliでルーターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。