Einführung in die Konfigurationsmethode des Routers in vue.js

Dieser Artikel bietet Ihnen eine Einführung in die Router-Konfigurationsmethode in vue.js. Ich hoffe, dass er für Freunde hilfreich ist.

Installieren Sie das Routing-Modul im Vue-Projekt

npm install vue-router --save-dev

Bevor Sie das Routing konfigurieren, machen wir uns zunächst mit den Tags b988a8fd72e5e0e42afffd18f951b277 vertraut
b988a8fd72e5e0e42afffd18f951b277 und 3499910bf9dac5ae3c52d5ede7383485-Tags haben die gleiche Funktion und werden verwendet, um

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

zu springen. Ignorieren Sie es vorerst, da „/body“ beim Konfigurieren des Routings definiert ist >Die Rolle von 975b587bf85a482ea10b0a28848e78a4: Wenn Sie auf b988a8fd72e5e0e42afffd18f951b277 klicken, wird darin die Seite angezeigt, zu der Sie springen müssen, ähnlich wie im 04a0d55efbbfd646a993fbc01f262c57

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

Router konfigurieren

Führen Sie das Router-Modul in der Datei main.js ein und konfigurieren Sie es

//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;
})

Nachdem der Router definiert wurde, verwenden Sie ihn mit dem b988a8fd72e5e0e42afffd18f951b277 975b587bf85a482ea10b0a28848e78a4 Tags

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

Verwandte Empfehlungen:

Verschachteltes Routing (Sub-Routing) von Vue.js

Vue js Routenbenennung und benannte Ansichten

Das obige ist der detaillierte Inhalt vonEinführung in die Konfigurationsmethode des Routers in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!