美文网首页vue偏方
nuxt--动态路由

nuxt--动态路由

作者: 赤身荆棘 | 来源:发表于2020-10-09 15:53 被阅读0次

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

因为公司最近在做seo的优化,用的是nuxt,没有做ssr,所以只能做一些基础的优化.

动态路由:把页面跳转的链接改一下

----------变成了----------------->

虽然我也没太懂为什么这样做就算是对seo的一点基础优化了(有朋友知道,望解答)

其实我也百度了很多教程,但是都没怎么看懂,最后在技术胖那的一个视频中看明白了,在实践过程中,还是夭折了(原因就是这个单词写错了,感觉要被自己蠢哭)。

这是我的项目名和它的详情页

这时候就需要创建一个新文件,跟index.vue同级

名字呢就姑且取名为_id.vue

为什么前面有个_呢,相当于这就是动态路由的标志。

 之前页面之间的跳转是用的router-link,query传的值

在子页面接收值是用的 $route.query.projectId(ps:query后面的变量和接收使用的是同一个)

利用动态路由之后,接受值就是$route.params.idps:params后面的参数就是_后面的文件名,例如_haha.vue,那么就是$route.params.haha

这个时候页面的跳转就可以直接用a标签跳转了

 因为courseId是后台传过来的字段名,所以这里也就直接写上去了,item是因为我这有个循环,item拿到循环里面的每一项。

这样子这个页面跳转的链接就处理好了。(排版很丑啊,随意记录学习历程)

相关文章

  • nuxt--动态路由

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

  • Vue 动态路由

    动态路由 动态路由传参

  • 动态路由 & 嵌套路由实例

    1.动态路由 注意:动态路由以‘:’开头。$route 参数表见 “ 动态路由 & 嵌套路由 ” 2.嵌套路由 注...

  • vue路由的介绍(二)--vue动态路由和get的传值

    vue动态路由和get的传值---->同属于路由的传参 1,vue动态路由: 动态路由的配置: ①,在配置路由时加...

  • 处理路由和权限映射element-admin

    你现在项目中如何处理路由和权限映射的? 动态路由分析动态路由流程图 动态路由源码分析生成动态路由的源码位于 src...

  • vue全家桶(2.5)

    3.8.动态路由匹配和路由组件传参 #3.8.1.动态路由匹配 动态路由意味着不固定,具有某种模式,我们希望通过某...

  • vue动态路由传值和get传值

    1、动态路由传值2、get传值 不同路由传值:动态路由 1、配置动态路由,main.js 2、在列表页NewsLi...

  • Vue常见面试题

    1.怎么定义vue-router的动态路由?怎么获取传递过来的动态参数? 何为动态路由?能够提供参数的路由即为动态...

  • vue中的路由

    vue中4中路由包含: 1、动态路由2、嵌套路由3、编程式路由4、命名式路由 1、动态路由 2、嵌套路由 3、编程...

  • this.$router.push的问题

    会匹配到‘/login’路由,但是 如果遇到动态路由会加载到动态路由后面。 所以不要忘了加'/'

网友评论

    本文标题:nuxt--动态路由

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