So verwenden Sie den Router in Vue-Cli

Dieser Artikel stellt hauptsächlich die grundlegende Verwendung des Vue-Cli-Routers im Detail vor. Interessierte Freunde können darauf verweisen.

1. Erstellen Sie ein neues Router-Verzeichnis im src-Verzeichnis und erstellen Sie dann 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'}
  }
});

Das @ im Code befindet sich im Webpack .base.conf. Der Zweck der Änderung der Konfiguration in js besteht darin, dass es zu mühsam ist, jedes Mal, wenn eine Datei wie eine Komponente eingeführt wird, einfach @ zu verwenden. Die Konfigurationsänderung ist wie folgt >

2. Fügen Sie es in die Eintragsdatei main.js ein und mounten Sie es auf dem Knoten

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

3. Verwenden Sie es in der App.vue-Datei und klicken Sie, um die Route zu wechseln. Der Inhalt wird im Router-View-Container angezeigt.

import router from './router';

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

Wenn es drei Klicks gibt, um die Route zu wechseln B. Produkte, Händler und Kommentare, möchten Sie den aktuell angeklickten festlegen. Der Stil jedes Knotens kann festgelegt werden

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

.router-link-active {color: rgb(139,0, 0); Der Router löst modulübergreifende Seitensprünge

Der Vue-Router imitiert die Beispielfreigabe in der unteren Navigationsleiste von Tmall

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Router in Vue-Cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!