美文网首页vue偏方
nuxt-相同目录下的多个动态路由跳转

nuxt-相同目录下的多个动态路由跳转

作者: 赤身荆棘 | 来源:发表于2020-10-13 16:45 被阅读0次

同人博客搬迁~~~~(播客主页:https://www.cnblogs.com/epines/

  在项目的新需求中,对url规则更改,这里拿课程页面举例,

文件目录:pages/course/_course.vue----页面规则需要更改为---->浏览器显示 : http://主站地址/course    或者     http://主站地址/course/list_类型id_排序情况_升序(或者降序)_页码

  因为课程页面包含了分页,以及相应的筛选功能(如下图),

  课程封面点进去进入课程详情,之前的文件路径为 pages/course/courseDetail/_id.vue,这里用的动态路由获取id,然后查询课程详情,使浏览器上的链接地址为: http://主站地址/course/courseDetail/课程id

  而需求是两个同时在course下,新的文件结构如下

| course

| -------_course.vue

| -------_id.vue

  因此从pages/index.vue中跳过来时,就会出现无论怎么输入后面动态路由参数,只会进一个页面,具体进那个页面是根据路由配置文件中,具体出现的顺序有关,

因为就需要我们手动配置,在nuxt.config.js中,具体规则可以看官网文档

  但是这样并不能解决问题,因此就需要在我们的文件命名上做文章,

  把我们的_id.vue,命名问id.vue,因为他就不是个动态路由了,但是我们可以在nuxt.config.js把它配置成一个动态路由,

   其实是不是动态路由最终是可以由你自己来决定的,并不是文件名前有没有_来决定他是不是动态路由的。

  这里_course.vue更改为list_course.vue是因为我的目录需要它,而且,进我的主页去必须是http://localhost:3000/course,http://localhost:3000/course/,http://localhost:3000/course/list结构的,没有list只是course/xxxxx是不会去我的主页的,去的是我的详情页的

  那个path对应的三个,是我希望我的http://localhost:3000/course,http://localhost:3000/course/,http://localhost:3000/course/list_xxxxx_xxx_xx_4最终都到一个页面去。

          所以这个问题就这么解决了, ╭(╯ε╰)╮╭(╯ε╰)╮ 

 总结一下变化,

1,文件结构

    | course                                   | course

    | --------_course.vue                                | -------list_course.vue

    | --------courseDetail            ----变成了这样---->           | -------id.vue

       |----------------_id.vue

2,nuxt.config.js的更改

    添加路由手动配置

{

    path: "/course" || "/course/" || "/course/list:course",

    component: resolve(__dirname, 'pages/course/list_course.vue'),

    name: "course-listcourse"},

{

    path: "/course/:id",//把非动态路由配置为动态路由

    component: resolve(__dirname, 'pages/course/id.vue'),

    name: "course-id"},

然后over

相关文章

  • nuxt-相同目录下的多个动态路由跳转

    同人博客搬迁~~~~(播客主页:https://www.cnblogs.com/epines/[https://w...

  • Angular中的动态路由js跳转以及路由get传值js跳转

    1、动态路由js跳转 与前面的动态路由参数大致相同,也是跳转页面的过程中,将数据传过去在news页面中,首先引入R...

  • Vue 路由跳转相同路径页面不刷新

    Vue 路由跳转相同路径页面不刷新 vue 同一路由跳转不走生命周期,导致数据不更新不管是动态路由,还是传参 都不...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • angular6.x--路由

    >创建路由 >动态路由 >默认跳转路由 **>routerLinkActive设置routerLink默认选中路由...

  • nuxt基础

    路由跳转 动态路由 对应会自动生成如下路由 路由参数校验 返回布尔值,false则跳转到404页面 嵌套路由

  • 动态路由理解

    一、通过配置动态路由进行页面跳转同时进行参数传递 1、配置路由 2、跳转设置 ----------》注意这种方式...

  • flutter-Could not find a generat

    最近在研究flutter这个东西,在做路由跳转的时候遇到点小小的问题,动态路由跳转没有任何问题,今天配置好的路由怎...

  • Vue-router

    跳转方式 第一种:普通跳转 第二种:代码跳转 都要定义路由文件: 动态路由 路由懒加载 vue-cli4脚手架的代...

  • Vue路由

    一、Vue路由基础用法: 二、Vue路由配置的抽出 三、路由动态传值: 四、路由的跳转方式: 五、路由的hash模...

网友评论

    本文标题:nuxt-相同目录下的多个动态路由跳转

    本文链接:https://www.haomeiwen.com/subject/qugvpktx.html