Vue.jsでルーティングを設定する方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-13 14:36:25

オリジナル

2389 人が閲覧しました

今回は、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>

ログイン後にコピー

の効果を実現します

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

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

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>

ログイン後にコピー

効果:

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