Comment utiliser le routeur dans vue-cli-js tutoriel-php.cn

Comment utiliser le routeur dans vue-cli

小云云

Libérer： 2018-01-15 13:32:08

original

1973 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 &#39;vue&#39;;
import VueRouter from &#39;vue-router&#39;;
import goods from &#39;@/components/goods/goods&#39;;

Vue.use(VueRouter);

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

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: [&#39;.js&#39;, &#39;.vue&#39;, &#39;.json&#39;],
  alias: {
   &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39;,
   &#39;@&#39;: resolve(&#39;src&#39;),
  }
 }

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 &#39;./router&#39;;

/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 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!