Comment définir le routage dans Vue.js

Cette fois, je vais vous montrer comment configurer le routage dans Vue.js et quelles sont les précautions pour configurer le routage dans Vue.js. Ce qui suit est un cas pratique. , jetons un coup d'oeil.

① Carte d'itinéraire

Importer vue-router dans main.js

importer VRouter depuis 'vue-router'

Définir l'itinéraire global

Vue.use(VRouter)

Instancier le routeur

let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',  routes: [    //  做一个映射表
    {      path: '/apple',      component: Apple
    },
    {      path: '/banana',      component: Banana
    }
  ]
})
/* eslint-disable no-new */new Vue({  el: '#app',
  router,
  template: '<app></app>',
  components: { App }
})

②RouteVue

Intégrer < ;router-view>-view>

<template>  <div>
    ![](./assets/logo.png)    <!--
    访问apple的时候,将apple的视图塞到这个位置
    访问banana的时候,将banana的视图塞到这个位置
    -->
    <router-view></router-view>
  </div></template>

Effet de réussite

③ RoutageNavigation

Dans le fichier app.vue , intégrez la balise router-link, qui peut obtenir l'effet d'une balise

to apple

Utilisation spécifique :

<template>
  <div id="app">
    ![](./assets/logo.png)    <!--
    访问apple的时候,将apple的视图塞到这个位置
    访问banana的时候,将banana的视图塞到这个位置
    -->
    <router-view></router-view>
    <router-link :to="{path:&#39;apple&#39;}">to apple</router-link>
    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>
  </div></template>

Effet :

Je crois qu'après avoir lu le cas dans cet article Vous maîtrisez le méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Attributs des balises Vue et rendu conditionnel de Vue.js

Rendu de liste v de Vue.js -pour le sous-composant d'objet tableau

Rendu de texte de Vue.js

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!