script setupでbeforeRouteEnter - vue3, composition api

今のところAPIはサポートされていないので、以下のようにする必要がある。

これが自然な書き方だとも思う。

code:js

<script>

import { useFetch } from '@vueuse/core'

export default {

beforeRouteEnter: function (to) {

to.params.data = data

}

}

</script>

<script setup>

defineProps({

data: {

required: true

}

})

// ...

</script>

code:js

<script>

// normal <script>, executed in module scope (only once)

runSideEffectOnce()

// declare additional options

export default {

inheritAttrs: false,

customOptions: {}

}

</script>

<script setup>

// executed in setup() scope (for each instance)

</script>

vue3のDocumentのサンプルコードの書き方が、一番上にscriptがあって、その下にtemplateがあった。svelteに似ている。

2022/5/28

code:js

<script lang="ts">

import { defineComponent, ComponentPublicInstance } from 'vue'

interface IInstance extends ComponentPublicInstance {

setPathFrom(from: string): void

}

export default defineComponent({

beforeRouteEnter(to, from, next) {

next((vm) => {

const instance = vm as IInstance

instance.setPathFrom(from.path)

})

},

})

</script>

<script lang="ts" setup>

let pathFrom: string

const setPathFrom = (path: string) => {

pathFrom = path

console.log('vue-route::from::', pathFrom)

}

defineExpose({ setPathFrom })

</script>