Vue+Vuetify+Vue-Router入門-2

ここからはよく覚えていないのでGymcodingのYouTube動画を参考に、改めて復唱します。

余っていましたが、記憶が消去される時間も早かった私は、Googleが買収したユーチューブの内容を参考にして、いろいろ勉強になりました.しかし記憶が消える時間がTLCよりも早い私の脳は揮発性記憶なので、長く記録するのは難しいので、このブログでこの記事を書きました.
現在、本人の技術ブログ兼ポートフォリオを制作しています.したがって、この文章のすべてのドキュメントの名前はそれに従います.
まずルーター.jsを作成する前に、コンポーネントページを作成します.
プロジェクトを作成するときは、作成した構成部品フォルダを使用するか、任意に作成できます.
ジム・コディンのYouTube動画を参考にしたのでviewsフォルダに使いました.
搬送素子にはまず準備物が必要である.
コンポーネントのビューページを表示するには、router.js, main.js
これらが用意されている場合は、ページのappが表示されます.あなたはvueに行ってこれらのやつをどのように表示するかを明記して、ネット上で表示することができます.

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '@/views/About'
import Board from '@/views/Board'
import Calender from '@/views/Calender'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'About',
        component: About,
    },
    {
        path: '/board',
        name: 'Board',
        component: Board,
    },
    {
        path: '/calender',
        name: 'Calender',
        component: Calender,
    },
]

const router = new VueRouter({
    mode: 'history',
    routes
})

export default router

翻訳>
VueRouterのファイルをインポートするルートディレクトリを教えてください.@/フォルダ名/ビューファイル名"
また、ファイルのルートパスにはnameというコンポーネントも書かれていますので、参照してください.また、使用するnew VueRouterモードはHistoryであり、使用するアドレス名は配列オブジェクトを含むroutionsという注釈です.参考にしてください.そしてこれはすべてrouterと呼ばれています.分かりましたか.
jsファイルが既に作成されている場合は、mainにvueから読み込ませます.jsをインポートするには.

main.js

import Vue from 'vue'
import router from './router'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

翻訳jsを読むやつを教えてあげる.routerのルートは./ルーターの引き出しにあります.開けてみればいい
main.jsに追加するのは簡単ですが、routerをインポートし、次のnew Vueでrouterを指定する必要があります.これにより、ローカルポートの実行後に保存してもエラーメッセージは表示されません.それを入力しないと目が見えなくなる.
ここまでだったら今からアプリVueに行ってみよう

App.vue

<template>
  <div id="app">
    <div>
      <router-link to="/">About</router-link> |
      <router-link to="/board">Board</router-link> |
      <router-link to="/calender">Calender</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

テンプレートの内部にrouter-linkでアドレスを暗示し、さっき設定したルートにアクセスします.そしてそのアドレスrouter-viewで見ることができます



私があなたに決めた住所を通じて、私は正常に事前に作った部品のページを展示しています.
これで、ルーティング設定が正しいかどうかが完了しました.
今はvue-routerも設置されていますので、彼女が私を疲れさせたメイクパイをインストールさせてください.