学习nuxt笔记四-路由的基本使用

路由的基本使用 nuxt里面 对vue-router进行了封装 不需要创建路由 就可以实现路由的导航

学习视频www.bilibili.com/video/BV11W…

新建page目录 以及下面的vue页面 index.vue

<script setup lang="ts">
if(import.meta.server){
  console.log('服务端 index');
}else{
  console.log('客户端 index');
}
</script>

<template>
<div>index</div>
</template>

<style scoped lang="scss">

</style>

app.vue

<script setup>
console.log(123456);
if(import.meta.server){
  console.log('服务端');
}else{
  console.log('客户端');
}
// const config=useRuntimeConfig()
// console.log(config.count);
// console.log(config.public.baseURL);

// if(config.isServer){
//   console.log('服务端');
// }else{
//   console.log('客户端');
// }

</script>
<template>
  <header>
    <ul>
    <!-- 使用客户端路由切换,不会刷新整个页面,只更新路由对应的组件内容 -->
    <!-- <router-link to="/">首页</router-link> -->
    <li><NuxtLink to="/">首页</NuxtLink></li>
    <li><NuxtLink to="/about">关于</NuxtLink></li>
    <li><NuxtLink to="/user">用户</NuxtLink></li>
    <li><NuxtLink to="/login">登录</NuxtLink></li>
  </ul>
  </header>
  <main>
    <!-- <router-view></router-view> -->
    <!--相较于router-view 支持支持动态路由，支持嵌套路由 -->
    <NuxtPage></NuxtPage>
  </main>
  <footer>
    footer
  </footer>
</template>
<style scoped lang="scss">
header,footer,main{
  border: 1px solid  red;
}

</style>
// if(confi

路由说明:

1. 所有路由都会通过<router-view>组件进行渲染
2. 应用的根路由为 http://localhost:3000
3. pages 目录下的每个 .vue 文件都会自动生成对应的路由:

• index.vue 对应根路由 "/"
• 其他文件按照文件路径生成路由

4. 访问 http://localhost:3000 时会自动重定向到 "/" 路由, 并渲染 pages/index.vue 的内容

控制台输出说明：

• 点击header里面的标签切换页面时: 清空控制台后,点击login再点击index,控制台只输出客户端 index NuxtLink组件实现了客户端路由导航,不会触发完整页面刷新，app.vue作为根组件只在应用初始化时执行一次，切换路由时只更新NuxtPage内的组件内容，所以控制台不会输出app页面中的客户端。

• 通过在浏览器输入http://localhost:3000/时: 控制台会输出 "服务端" "客户端" "服务端 index" "客户端 index" 会执行服务端渲染和客户端

• 单纯刷新页面时: 与直接访问URL效果相同,会重新执行服务端渲染和客户端激活流程