Vue.js Router 使い方

投稿者: Auther | 3 年 前 | 0 のコメント

router.js

HelloWorldとHelloJSXを組み込んで表示

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import HelloJSX from './components/HelloJSX.jsx'

export const router = createRouter({ //export 値:routerオブジェクトが外部から利用可能に
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'index',
      component: HelloWorld, //割り当てるコンポーネント
    },
    {
      path: '/jsx',
      name: 'jsx',
      component: HelloJSX,
    },
  ],
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import { router } from './router'

var app = createApp(App)
app.use(router)
app.mount('#app')

App.vue

<template>
  <div id="app">
    <div>
      <router-link to="/" class="btn btn-primary mx-2">
        Go to Top
      </router-link>
      <router-link to="/jsx" class="btn btn-warning">
        Go to JSX
      </router-link>

    </div>
    <hr>
    <router-view></router-view> //<router-link>をクリックして表示されるコンポーネント
  </div>
</template>

<script>
export default {
  name: 'app',
  created() {
    console.log("***** App Created! *****")
  },
  mounted() {
    console.log("----- App Mounted! -----")
  },
  data() {
    return {
      title:'Router'
    }
  }
}
</script>

名前付きビューの利用

<router-view name="******"></router-view>

router.js

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'index',
      components:{
        default: HelloWorld,
        first: HelloWorld,
        second:HelloJSX
      },
    },
    {
      path: '/jsx',
      name: 'jsx',
      components:{
        default: HelloJSX,
        first: HelloJSX,
        second:HelloWorld
      },
    },
  ],
})

App.vue

<template>
  <div id="app">
    <div>
      <router-link to="/" class="btn btn-primary mx-2">
        Go to Top
      </router-link>
      <router-link to="/jsx" class="btn btn-warning">
        Go to JSX
      </router-link>
    </div>
    <hr>
    <h5>default view</h5>
    <router-view/>
    <hr>
    <h5>A & B</h5>
    <router-view name="first"></router-view>
    <router-view name="second"></router-view>
  </div>
</template>

パラメータの利用

Helloworld.vue

<template>
  <div class="alert alert-primary">
    <h1>{{data.title + ' [' + name + ']'}}</h1>
    <p class="mt-3 h5">{{data.msg}}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'HelloWorld',
  props:{
    name: String,
   },
  setup(props, context) {
    const data = reactive({
      title: 'Router',
      msg: 'This is HelloWorld component.',
    })
    return {
      data
    }
  }
}
</script>

HelloJSX.jsx

import { ref, reactive } from 'vue'

export default {
  name: 'HelloJSX',
  props:{
    name: String
  },
  setup(props) {
    const data = reactive({
      title: 'Router',
      msg: 'This is JSX component sample.',
    })
    return () => (
      <div class="alert alert-warning">
        <h1>{data.title} [{props.name}]</h1> //表示例 Router[hanako]
        <p>{data.msg}</p>
      </div>
    )
  }
}

routerでパラメーター指定

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/index/taro'
    },
    {
      path: '/index/:name',
      name: 'index',
      component: HelloWorld,
      props: true
    },
    {
      path: '/jsx/:name',
      name: 'jsx',
      component: HelloJSX,
      props: true
    },
  ],
})

App.vue

<template>
  <div id="app">
    <div>
      <router-link to="/index/taro" class="btn btn-primary mx-2">
        Go to Top
      </router-link>
      <router-link to="/jsx/hanako" class="btn btn-warning">
        Go to JSX
      </router-link>
    </div>
    <hr>
    <router-view></router-view>
  </div>
</template>

現在未評価

現在コメントはありません

新しいコメント

必須

記入が必要です(公開はされません)

オプション

最近の投稿

アーカイブ

2024
2023
2021
2020

タグ

多義語(1) 英語原論(15) 単語 上級(12) コラム(7) mezzanine(1) サブスリー(4) music(11) 海外移住(2) 文化(2) 政治(2) nujabes(3) ランニング(5) 発音(14) django(4) 文法(15) 文法問題(1) 教育論(3) 転職(2) 仕事(1) アニメ(1) cowboy bebap(26) TOEIC(1) 歴史(2) vuejs(7) 経済(1) lesencrypt(1) データサイエンス(1)

著者

Auther (120) admin (2)

フィード

RSS / Atom

Social Links

運営より

当ウェブサイト内のコンテンツ(文章、写真、イラスト、サイト構造など)に関する著作権等は 弊社、または制作者などに帰属しております。営利、非営利を問わず、当ウェブサイトのコンテンツの全て 、または一部を許可なく複製、転用、販売など二次利用することはご遠慮ください。

目覚めよ!英語力