ホームページ > 記事 > ウェブフロントエンド > 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: '<App/>', 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ルーターはTmallの下部ナビゲーションバーの共有例を模倣します
以上がvue-cliでルーターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。