02-nuxt3Js的路由

路由相关

nuxt中的路由是约定的，就是默认是取的pages文件夹下的vue文件为路由。

比如新建 pages/index.vue,pages/login.vue,pages/me.vue

那么访问 http://localhost:3000/login 就是访问 login.vue的内容。

别忘了 加上 <router-view></router-view>

<template>
    <div>
        <!--    <router-view></router-view>-->
        <!--    两者作用一样，不过nuxt-page 更强大-->
        <nuxt-page></nuxt-page>
    </div>
</template>

命名路由

就是http://localhost:3000/user/100001 这种。

1、新建pages/user/[id].vue

2、在[id].vue文件中获取参数

<script setup>
const route = useRoute();
console.log(route.params.id)
</script>

可选路由

也就是说 http://localhost:3000/test/me 和 http://localhost:3000/me 都访问一样的文件，其中test是可选的。 那么test文件夹起名的时候就要[[test]] 这样起

404路由

当路由不存在的时候，就跑到404路由。我们需要新建一个[...404].vue路由，就可以了

自定义路由

我们想自定义路由名称也是可以的。比如在pages/me.vue文件中。我们这样写

<script setup>
definePageMeta({
  path:"/me2"
})
</script>

编程式路由

<script setup>
/**
 * navigateTo("/login") 语法，在客户端和服务端都会进行跳转，所以建议还是加上环境判断
 * 当在服务端进行重定向的时候，服务端 后面的代码还是会执行的。 客户端是不会执行的。
 *
 * const router = useRouter()
 * router.push('/login') 只会在客户端起作用！！！
 */
if (import.meta.enable) {
  navigateTo("/login")
}

console.log('服务端打印log')
</script>