Introduction à la méthode de configuration du routeur dans vue.js

Cet article vous apporte une introduction à la méthode de configuration du routeur dans vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Installez le module de routage dans le projet vue

npm install vue-router --save-dev

Avant de configurer le routage, comprenons d'abord les balises b988a8fd72e5e0e42afffd18f951b277 et 975b587bf85a482ea10b0a28848e78a4 router-link> et 3499910bf9dac5ae3c52d5ede7383485 ont la même fonction et sont utilisés pour accéder à

<router-link to="/body">点我跳转页面</router-link>

À l'intérieur se trouve l'adresse, car "/body" est défini lors de la configuration du routage.

975b587bf85a482ea10b0a28848e78a4 : lorsque vous cliquez sur b988a8fd72e5e0e42afffd18f951b277, la page à laquelle vous devez accéder s'y affichera, un peu comme 04a0d55efbbfd646a993fbc01f262c57

Configurer le routeur

<div>
   <router-view></router-view>
</div>

Introduire et configurer le module routeur dans le fichier main.js

Une fois le routeur défini, coopérer avec b988a8fd72e5e0e42afffd18f951b277 et 975b587bf85a482ea10b0a28848e78a4 Utiliser les balises

//main.js

//引进路由器模块
import VueRouter from 'vue-router'

//引进跳转的 组件页面地址
import App_head from './App_head'
import body_z from './components/HelloWorld'

Vue.config.productionTip = false;
Vue.use(VueRouter);

//配置路由器
const router = new VueRouter({
  routes:[
    //path为 "/" 意思是：<router-view> 标签初始显示的地址
    //component为上面 组件名
    {path:"/",component:App_head},              
    {path:"/body",component:body_z}
  ],
  mode:"history"                 //定义这个后，打开网页，8080后面不会跟着 /#/ 的符号
});

new Vue({
  router,                              //记得在这里定义路由器，否则不能使用
  el: &#39;#app_body&#39;,
  components: { App_body },
  template: &#39;<App_body/>&#39;
})

Recommandations associées :

<div>
   //点击后，跳转到http://localhost:8080/body  
   //点击后，<router-view>将显示 HelloWorld 组件的内容
   <router-link to="/body">跳转页面</router-link>       
   <router-view></router-view>
</div>

Routage imbriqué de Vue.js (sous-routage)

Nom d'itinéraire et vues nommées pour 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!