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 vertraut
und -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 : Wenn Sie auf klicken, wird darin die Seite angezeigt, zu der Sie springen müssen, ähnlich wie im

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

Router konfigurieren <🎜 in H5 >

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 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!