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>

• タグ:
• vuejs

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

新しいコメント