【Nuxt】约定式路由和内置组件

约定式路由

手动创建：

或者还可以使用终端创建页面：nuxi-add-page
npx nuxi add page about — about.vue
npx nuxi add page about/index — about/index.vue

    <NuxtLink to="/">
      <button>Home</button>
    </NuxtLink>
    <NuxtLink to="/category">
      <button>Category</button>
    </NuxtLink>
    <NuxtLink to="/cart">
      <button>Cart</button>
    </NuxtLink>

内置组件

NuxtLink

• <NuxtLink>是Nuxt内置组件，用来实现页面导航，是对RouterLink的扩展，比如：进入视口的链接启用预取资源等。
  • 底层是一个<a>标签，因此使用a+href属性也支持路由导航
  • 但是用a标签导航会有触发浏览器默认刷新事件，而NuxtLink不会，NuxtLink 还扩展了其它的属性和功能
• 应用Hydration后（已激活，可交互），页面导航会通过前端路由来实现。这可以防止整页刷新。当然，手动输入URL后，点击刷新浏览器也可导航，这会导致整个页面刷新
• NuxtLink组件属性：
  • to:支持路由路径、路由对象、URL
  • href:to的别名
  • replace:默认为false,是否替换当前路由
  • activeClass:激活链接的类名
  • target:和a标签的target 一样，指定何种方式显示新页面

    <NuxtLink href="/category">
      <button>Category</button>
    </NuxtLink>
    <NuxtLink :to="{
        path: '/cart',
        query: {
          id: 1
        },
    }">
      <button>Cart</button>
    </NuxtLink>
<!--    激活的a会带上类 class="router-link-active router-link-exact-active" 可以通过 active-class 去修改激活的类 -->
<!--    加上 replace 属性会打开新页面进行路由替换 路由栈元素被替换 浏览器的后退不到之前的页面-->
<!--    跳转外部链接a标签会自动加上 rel="noopener noreferrer" 属性
        (同理直接使用a标签然后加上external属性也会被自动加上ref="xxx"外部属性)-->
    <NuxtLink to="https://www.baidu.com" target="_blank">
      <button>百度</button>
    </NuxtLink>
    <NuxtPage/>