程序员必备编程之基于vue的 Nuxt.js(二)路由详解

Nuxt.js(二)路由

一.概述

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

(不需要手动去配路由,文件生成自动生成对应路由的路径)

要在页面之间使用路由，我们建议使用 标签。

是vue原生态切换路径标签。

在原生态的基础上，进行了增强。

• 如果需要找一个nuxt实例代码，可以使用官方实例

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目录–参数id
user目录–参数name

六. 默认路由

路径	组件位置及其名称
不匹配的路径	pages/_.vue

• 404页面，可以采用 _.vue进行处理

请给努力中的自己点个赞哦!

*每天进步一点点`~~~~~*