61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
// The validate property accepts the route as an argument. You can return a boolean value to
|
||
|
|
// determine whether or not this is a valid route to be rendered with this page. If you return false, and
|
||
|
|
// another match can't be found, this will cause a 404 error. You can also directly return an object with
|
||
|
|
// statusCode/statusMessage to respond immediately with an error (other matches will not be checked).
|
||
|
|
|
||
|
|
// definePageMeta({
|
||
|
|
// title: "My Page",
|
||
|
|
// validate: async (route) => {
|
||
|
|
// Check if the id is made up of digits
|
||
|
|
// return typeof route.params.id === "string" && /^\d+$/.test(route.params.id);
|
||
|
|
// return {
|
||
|
|
// statusCode:403,
|
||
|
|
// statusMessage:"You have not access to this page."
|
||
|
|
// }
|
||
|
|
// return false;
|
||
|
|
// },
|
||
|
|
// middleware: "auth",
|
||
|
|
// pageTransition: {
|
||
|
|
// name: "rotate",
|
||
|
|
// },
|
||
|
|
// });
|
||
|
|
|
||
|
|
const isActive = ref(true);
|
||
|
|
const hasError = ref(false);
|
||
|
|
const color = ref("red");
|
||
|
|
|
||
|
|
const classObject = reactive({
|
||
|
|
active: true,
|
||
|
|
"text-danger": false,
|
||
|
|
});
|
||
|
|
|
||
|
|
// const route = useRoute();
|
||
|
|
// console.log(route.params.id);
|
||
|
|
|
||
|
|
// defineEmits(['update:modelValue'])
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<NuxtLink to="/" class="btn btn-primary"> Home </NuxtLink>
|
||
|
|
<div
|
||
|
|
class="static"
|
||
|
|
:class="{ active: isActive, 'text-danger': hasError }"
|
||
|
|
></div>
|
||
|
|
<div :class="classObject"></div>
|
||
|
|
<div class="text">hello</div>
|
||
|
|
<p :class="$style.red">This should be red</p>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.text {
|
||
|
|
color: v-bind(color);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style module>
|
||
|
|
.red {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
</style>
|