Vue.jsでルーティングを設定する方法

今回は、Vue.jsでルーティングを設定する方法と、Vue.jsでルーティングを設定する際の注意事項を紹介します。実際のケースを見てみましょう。

①ルートマップ

main.jsにvue-routerをインポート

「vue-router」からVRouterをインポート

グローバルルーティングを設定

Vue.use(VRouter)

ルーターをインスタンス化

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

②routingView

は app.vue ファイルに埋め込まれています

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

の効果を実現します

③ ルーティングナビゲーション

app.vue ファイルにルーターを埋め込みます-link タグ、このタグはタグの効果を実現できます

to apple

特定の用途:

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

効果:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.jsのVueタグ属性と条件付きレンダリング

Vue.jsのv-for配列オブジェクトサブコンポーネントのリストレンダリング

Vue.jsのテキストレンダリング

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