vue.jsでのルーターの設定方法の紹介

この記事では、vue.js でのルーター設定方法を紹介します。必要な方は参考にしていただければ幸いです。

ルーティング モジュールを vue プロジェクトにインストールします

npm install vue-router --save-dev

ルーティングを設定する前に、まず b988a8fd72e5e0e42afffd18f951b277 ラベルと 3499910bf9dac5ae3c52d5ede7383485 ラベルについて理解しましょう。同じ関数は、アドレスを含む

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

to にジャンプするために使用されます。ルートを設定するときに「/body」が定義されているため、975b587bf85a482ea10b0a28848e78a4 をクリックすると、この関数は無視されます。 router-link> には、H5 の 04a0d55efbbfd646a993fbc01f262c57 に似た、ジャンプする必要があるページが表示されます

main.js ファイルにルーター モジュールを導入して設定します

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

ルーターを定義したら、b988a8fd72e5e0e42afffd18f951b277 タグと 975b587bf85a482ea10b0a28848e78a4 タグを使用します

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

関連する推奨事項:

Vue.js のネストされたルーティング (サブルーティング)

.js ルーティングの名前付けと命名表示

以上がvue.jsでのルーターの設定方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。