Nuxt.js(二)路由
一.概述
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
(不需要手动去配路由,文件生成自动生成对应路由的路径)
要在页面之间使用路由,我们建议使用 标签。
是vue原生态切换路径标签。
在原生态的基础上,进行了增强。
https://zh.nuxtjs.org/examples/named-views/
二.基本路由
- 自动生成基础路由规则
路径 | 组件位置及其名称 |
---|---|
/ | pages/index.vue |
/user | pages/user/index.vue |
/user/one | pages/user/one.vue |
-
情况1:访问路径,由pages目录资源的名称组成(目录名称、文件的名称)
- 资源位置: ~/pages/user/addstudent.vue
- 访问路径:http://localhost:3000/user/addstudent
-
情况2:每一个目录下,都有一个默认文件 index.vue
- 资源位置: ~/pages/user/index.vue
- 访问路径:http://localhost:3000/user
三. 动态路由
在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
路由中路径匹配 | 组件位置及其名称 |
---|---|
/ | pages/index.vue |
/user/:id | pages/user/_id.vue |
/:slug | pages/_slug/index.vue |
/:slug/comments | pages/_slug/comments.vue |
四. 动态嵌套路由
路由中路径配置 | 组件位置及其名称 |
---|---|
/ | pages/index.vue |
/:category | pages/_category.vue |
/:category/ | pages/_category/index.vue |
/:category/:subCategory | pages/_category/_subCategory.vue |
/:category/:subcategory/ | pages/_category/_subCategory/index.vue |
/:category/:subcategory/:id | pages/_category/_subCategory/_id.vue |
嵌套目录
目录–嵌套
category目录(变量)–子目录(变量)–参数id <br / >
多级嵌套跳转文件的名称可以简单定义,会自动匹配到相应的目录文件
五.动态命名路由
- 路径 “/news/123”匹配“_id.vue”还是“_name.vue”?
- 我们可以使用解决以上问题
第2新闻
第3新闻
- 通过name 确定组件名称:“xxx-yyy”
- 通过params 给对应的参数传递值
如果同一个文件夹中,存在两个动态命名vue,如何区分。/pages/user/_id.vue/pages/user/_name.vue
在nuxt.js采用动态参数的方式进行区分 name取值:user-id , 文件夹名与文件名组合,使用-连接 params取值:对应变量的参数
动态命名路由
user目录–参数iduser目录–参数name
六. 默认路由
路径 | 组件位置及其名称 |
---|---|
不匹配的路径 | pages/_.vue |
请给努力中的自己点个赞哦!
*每天进步一点点`~~~~~*