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 >

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

import router from './router';

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

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

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!