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

谁借莪１个温暖的怀抱￠ 2023-07-18 11:22 2阅读 0赞

# Nuxt.js(二)路由 #

## 一.概述 ##

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

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

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

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

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

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

#### [https://zh.nuxtjs.org/examples/named-views/][https_zh.nuxtjs.org_examples_named-views] ####

####  ####

## 二.基本路由 ##

*  自动生成基础路由规则

<table> 
 <thead> 
  <tr> 
   <th>路径</th> 
   <th>组件位置及其名称</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/</td> 
   <td>pages/index.vue</td> 
  </tr> 
  <tr> 
   <td>/user</td> 
   <td>pages/user/index.vue</td> 
  </tr> 
  <tr> 
   <td>/user/one</td> 
   <td>pages/user/one.vue</td> 
  </tr> 
 </tbody> 
</table>

*  情况1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）
    
    \- 资源位置： ~/pages/user/addstudent.vue
    
    \- 访问路径：http://localhost:3000/user/addstudent

![img][]

*  情况2：每一个目录下，都有一个默认文件 index.vue
    
    \- 资源位置： ~/pages/user/index.vue
    
    \- 访问路径：http://localhost:3000/user

![img][img 1]

## 三. **动态路由** ##

#### 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。 ####

<table> 
 <thead> 
  <tr> 
   <th>路由中路径匹配</th> 
   <th>组件位置及其名称</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/</td> 
   <td>pages/index.vue</td> 
  </tr> 
  <tr> 
   <td>/user/:id</td> 
   <td>pages/user/_id.vue</td> 
  </tr> 
  <tr> 
   <td>/:slug</td> 
   <td>pages/_slug/index.vue</td> 
  </tr> 
  <tr> 
   <td>/:slug/comments</td> 
   <td>pages/_slug/comments.vue</td> 
  </tr> 
 </tbody> 
</table>

![img][img 2]

![img][img 3]

## 四. 动态嵌套路由 ##

<table> 
 <thead> 
  <tr> 
   <th>路由中路径配置</th> 
   <th>组件位置及其名称</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/</td> 
   <td>pages/index.vue</td> 
  </tr> 
  <tr> 
   <td>/:category</td> 
   <td>pages/_category.vue</td> 
  </tr> 
  <tr> 
   <td>/:category/</td> 
   <td>pages/_category/index.vue</td> 
  </tr> 
  <tr> 
   <td>/:category/:subCategory</td> 
   <td>pages/_category/_subCategory.vue</td> 
  </tr> 
  <tr> 
   <td>/:category/:subcategory/</td> 
   <td>pages/_category/_subCategory/index.vue</td> 
  </tr> 
  <tr> 
   <td>/:category/:subcategory/:id</td> 
   <td>pages/_category/_subCategory/_id.vue</td> 
  </tr> 
 </tbody> 
</table>

![img][img 4]

# 嵌套目录 #

目录–嵌套

category目录（变量）–子目录（变量）–参数id <br / >

#### 多级嵌套跳转文件的名称可以简单定义,会自动匹配到相应的目录文件 ####

## 五.**动态命名路由** ##

![img][img 5]

*  路径 “/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

## 六. **默认路由** ##

<table> 
 <thead> 
  <tr> 
   <th>路径</th> 
   <th>组件位置及其名称</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>不匹配的路径</td> 
   <td>pages/_.vue</td> 
  </tr> 
 </tbody> 
</table>

*  #### 404页面，可以采用 \_.vue进行处理 ####

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

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

[https_zh.nuxtjs.org_examples_named-views]: https://zh.nuxtjs.org/examples/named-views/
[img]: /images/20230528/703f87ba11ae4ce392aeeff834ec9601.png
[img 1]: /images/20230528/6a4cf631b80a475b8963b9b8589fdb17.png
[img 2]: /images/20230528/bebf96598d464332b481babe77829417.png
[img 3]: /images/20230528/1c72a258c3a24dd1bc8042bcf554e0fd.png
[img 4]: /images/20230528/e43cea21dee940f896f4276b00907429.png
[img 5]: /images/20230528/cc0aefd36db744d2b145359a95c859e0.png