Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser le routeur dans vue-cli

小云云
Libérer: 2018-01-15 13:32:08
original
1941 Les gens l'ont consulté

Cet article présente principalement en détail l'utilisation de base du routeur vue-cli. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

1. Créez un nouveau répertoire de routeur dans le répertoire src, puis créez 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'}
  }
});
Copier après la connexion

Le @ dans le code est dans le webpack. .base.conf. Le but de la modification de la configuration dans js est qu'il est trop compliqué d'écrire des chemins relatifs à chaque fois qu'un fichier tel qu'un composant est introduit. Utilisez simplement @ à la place. >


2. Introduisez-le dans le fichier d'entrée main.js et montez-le sur le nœud
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 }
Copier après la connexion


3. Utilisez-le dans le fichier App.vue, cliquez pour changer de routage, le contenu est présenté dans le conteneur de vue du routeur
import router from './router';

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


S'il y a trois clics tels que des produits , les commerçants et les commentaires pour changer d'itinéraire, vous souhaitez définir celui sur lequel vous avez actuellement cliqué. Le style de chaque nœud peut être défini
<template>
 <p id="app">
  <p class="tab">
    <router-link to="/goods" >商品</router-link>
  </p>
  <router-view></router-view>
 </p>
</template>
Copier après la connexion

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


Recommandations associées :


Partage d'instance de base de routage Vue-router

Routeur résout les sauts de page entre modules

Le routeur Vue imite le partage d'exemples de barre de navigation inférieure de Tmall

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal