Routing页面

URL或路由来显示该文件的内容。

通过为每个页面使用动态导入Nuxt

Pages

路由基于vue-router并根据pages/目录下创建的每个组件的文件名生成路由。

示例目录结构pages/

pages/posts/[id].vuetemplatedivh1

posts

属性被设置为页面的路径。

一旦应用程序水合页面转换将通过更新浏览器

URL

将自动提前预取组件和链接页面的有效载荷生成的页面从而加快导航速度。

layouts/default.vuetemplateheadernavulliNuxtLink

to/dashboardDashboard/NuxtLink/liliNuxtLink

to/aboutAbout/NuxtLink/liliNuxtLink

to/posts/1Post

组件的setup()方法通过组合函数useRoute()以访问当前路由的详细信息。

pages/posts/[id].vue

pages/posts/[id].vuetemplatedivh1

posts

scoped/style此时点击页面顶部的导航链接就可以看到效果了。

路由中间件

提供了一个可定制的路由中间件框架您可以在整个应用程序中使用非常适合在导航到特定路由之前提取您想要运行的代码。

路由中间件运行于

部分。

尽管名称相似但它们与服务器中间件完全不同后者运行于应用程序的

Nitro

middleware直接定义在使用路由中间件的页面中。

命名路由中间件Named

route

middleware放置在middleware/下且带有.global的后缀每次路由变更时都会自动运行。

首先创建中间件文件

pages/dashboard.vuetemplatedivh1

dashboard

通过definePageMeta中的validate属性在你想要验证的每个页面中提供路由验证。

你可以返回一个布尔值来确定这是否是一个有效的路由并与此页面一起呈现。

如果返回

404

错误。

也可以直接返回一个带有statusCode/statusMessage的对象以立即响应错误其他匹配将不会被检查。

pages/posts/[id].vuetemplatedivh1

posts

/^\d$/.test(route.params.id);},

});