本文介绍了如何在TypeScrip的Vue合成API中动态访问当前的路由名称?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用Vue 3中的Vue组合API使用Vue路由器,对当前路由名称进行被动访问?
推荐答案
以下是使用Vue 3.0和Vue路由器v4.0.0-Beta.12与复合API语法的示例:
<script lang="ts">
import { defineComponent, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
export default defineComponent({
name: 'MyCoolComponent',
setup() {
const route = useRoute();
console.debug(`current route name on component setup init: ${route.name}`);
// You could use computed property which re-evaluates on route name updates
// const routeName = computed(() => route.name);
// You can watch the property for triggering some other action on change
watch(() => route.name, () => {
console.debug(`MyCoolComponent - watch route.name changed to ${route.name}`);
// Do something here...
// Optionally you can set immediate: true config for the watcher to run on init
//}, { immediate: true });
});
return { route };
},
});
</script>
<template>
<p>Current route name: {{ route.name }}</p>
</template>
或使用当前试用的脚本安装语法,SFC Composition API Syntax Sugar,用于合成API:
<script setup lang="ts">
import { computed, watch } from 'vue';
import { useRoute } from 'vue-router';
export const name = 'MyCoolComponent';
export const route = useRoute();
console.debug(`current route name on component setup init: ${route.name}`);
// You could use computed property which re-evaluates on route name updates
//export const routeName = computed(() => route.name);
// You can watch the property for triggering some other action on change
watch(() => route.name, () => {
console.debug(`MyCoolComponent - watch route.name changed to ${route.name}`);
// Do something here...
// Optionally you can set immediate: true config for the watcher to run on init
//}, { immediate: true });
});
</script>
<template>
<p>Current route name: {{ route.name }}</p>
</template>
这篇关于如何在TypeScrip的Vue合成API中动态访问当前的路由名称?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!