Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。要在页面之间使用路由,使用 <nuxt-link> 标签。
栗子:
<template>
<nuxt-link to="/">首页</nuxt-link>
</template>
nuxt的router.js是根据pages的目录结构生成的
假如pages的目录是
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
那么router.js如下:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
动态路由:
需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
pages/
--| _slug/
-----| comments.vue
--| users/
-----| _id.vue
--| index.vue
生成的router.js文件如下
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}
需要注意的是: 在父组件(.vue
文件) 内增加 <nuxt-child/>
用于显示子视图内容。
标签: ssr前端frontH5部分