页面布局和路由 / nuxt#7

layouts布局

layouts -> default.vue, <slot/>可以将其它页面插入
eg:
<template>
    <div class="body">
        <NavBar/>      
        <main class="containerX"> 
            <slot/>
        </main>
    </div>
</template>

//指定页面布局
layouts -> login.vue
//pages -> login.vue
definePageMeta({
    layout:"login"
})
另外，命名不能使用小驼峰的方法，要使用 `-` ！

Grid栅格系统

NaiveUI的Grid栅格系统，可以布局响应式的样式。

cols number | ResponsiveDescription 24 一般是分成24列，每列用 span 表示占比

<n-grid x-gap="12" :cols="4">
  <n-gi>
    <div class="light-green" />
  </n-gi>
  <n-gi>
    <div class="green" />
  </n-gi>
  <n-gi>
    <div class="light-green" />
  </n-gi>
  <n-gi>
    <div class="green" />
  </n-gi>
</n-grid>

//响应式布局 分成4列，占比是手机端时 0:4， 电脑端时 1:3
<n-divider>Screen 响应式</n-divider>
<n-grid x-gap="20" cols="4" item-responsive responsive="screen">
  <n-grid-item span="0 l:1">
    <div class="light-green">
      m 以下：不显示<br>
      m 到 l：占据空间 1<br>
      l 以上：占据空间 2
    </div>
  </n-grid-item>
  <n-grid-item span="4 l:3">
    <div class="green">
      2
    </div>
  </n-grid-item>
</n-grid>

页面和路由

Nuxt会自动使用Vue Router在底层创建路由，页面的名字就是路由地址。
新建 pages 文件夹，在此文件夹内创建页面。

pages/about.vue ->  localhost:3000/about

默认情况下`pages/index.vue`是根路径 /

//二级路由: 页面文件在一个目录下
pages/user/info.vue ->  localhost:3000/user/info

//二级路由中保留父组件内容
1. 在同级目录下创建同名的 vue 文件，eg: pages/user + pages/user.vue
2. `user.vue`中加入`<NuxtPage/>`即可索引到下一级的页面（page）文件

//组件导入则用slot
<slot/>

获取当前路径

useRoute 返回当前路由， 必须在setup函数、插件或路由中间件中调用。
在Vue组件的模板中，可以使用$route访问路由。

const route = useRoute()  // == $route
console.log(route.path) // '/about'

//获取路径id
$route.params.id

//除了动态参数和查询参数， useRoute() 还提供了以下与当前路由相关的计算引用:
fullPath: 与当前路由关联的编码URL，包含path、query和hash
hash: 以#开头的URL的解码hash部分
matched: 与当前路由位置相匹配的归一化路由数组
meta: 附加到记录的自定义数据
name: 路由记录的唯一名称
path: URL的编码路径名部分
redirectedFrom: 在到达当前路由位置之前试图访问的路由位置

useRouter

useRouter 返回路由器实例，必须在设置函数、插件或路由中间件中调用。
在Vue组件的模板中，你可以使用$router 来访问路由器。

const router = useRouter()

//几个重要参数：  
url: http://localhost:3000/user/userinfo
router.name: 'user-userinfo' 
router.fullPath: '/user/userinfo'
router.path: '/user/userinfo'

//几个重要的方法
router.back()
//$router.back() 返回上一页
router.forward()
router.go()
router.push({ path: "/home" })
router.replace({ hash: "#bio" })
back: 如果可能的话，回溯历史，和router.go(-1)一样。
forward: 如果可能的话，和 router.go(1)一样，在历史上前进。
go: 在历史中向前或向后移动，而不受 router.back() 和 router.forward()中强制执行的等级限制。

router.go(0)  //刷新当前页面