nuxt.js 动态路由

喜欢ヅ旅行 2022-10-04 13:57 202阅读 0赞

**1，在新闻目录下新建一个带下划线的vue文件表示一个动态路由：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]  
**2，此时路由js文件中会自动生成对应的路由**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 1]

**3，news.vue 传递参数**

<li><nuxt-link to="/news/111">news-1</nuxt-link></li>
    <li><nuxt-link to="/news/ewew">news-2</nuxt-link></li>

**4，\_routers.vue 接收参数**

<template>
        <div>
            <h1>传递过来的参数是{
       { $route.params.routers }}</h1>
        </div>
    </template>
    <script> export default { // 校验参数是否是数字，不是则返回404页面 validate({ params}){ // return的结果为布尔值，如果为false则404 return /^\d+$/.test(params.routers) } } </script>

![在这里插入图片描述][20210715163222203.jpg]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]: /images/20221004/ce8eff21548b4970bd6e83ad3f5762c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221004/5240d511b71340528fa021d153779cec.png
[20210715163222203.jpg]: /images/20221004/5a59b5b7cfab452381c4791ed2b918d0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 IP路由__动态路由

.使用协议来查找网络并更新路由表的配置，就是动态路由。它比使用静态或默认路由方便，但它需要一定的路由器CPU处理时间和网络链接带宽。路由协议定义了路由器与相邻路由器通信时...

「爱情、让人受尽委屈。」/ 2024年04月20日 10:07/ 0 赞/ 121 阅读

相关 Vue 动态路由

News.vue <template> <div> <h2>News</h2> <br> <route

朴灿烈づ我的快乐病毒、/ 2022年12月22日 15:24/ 0 赞/ 198 阅读

相关 Vue动态路由

[https://blog.csdn.net/weixin\_42069147/article/details/108061183][https_blog.csdn.net_w

以你之姓@/ 2022年11月19日 15:51/ 0 赞/ 252 阅读

相关静态路由和动态路由

现实生活中的路由表就是路牌，让你能够到达目的地。而计算机设备的数据要到达目标也需要有"路牌"，在网络中这叫路由。把数据从源设备发送到下一台设备。路由就是“找路”，是IP包转发路

r囧r小猫/ 2022年11月17日 10:20/ 0 赞/ 411 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 431 阅读

相关 Vue动态路由

Vue动态路由 1、添加路由 2、在导航守卫中添加路由 3、删除路由 3.1 通过添加名称冲突的路由。 3.2 通过调用rou

r囧r小猫/ 2022年08月31日 11:04/ 0 赞/ 272 阅读

相关动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件，那么我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果动态路径参数，以冒号开头看个

秒速五厘米/ 2022年05月19日 01:36/ 0 赞/ 264 阅读

相关 Zuul动态路由

> spring-cloud-netflix-core:1.3.0.RELEASE 原文：[https://note.youdao.com/share/?id=fbd1d5b

冷不防/ 2022年04月01日 03:52/ 0 赞/ 265 阅读

相关动态路由协议

[动态路由协议][Link 1] 动态路由协议分类 ——按工作区域分为内部网关协议IDP（RIP、IS-IS、OSPF）在同一个自治系统（AS）内交换路由

以你之姓@/ 2021年12月24日 05:13/ 0 赞/ 746 阅读

相关 koa 路由以及动态路由

1、引入Koa类和路由类 const Koa=require('koa'); const Router=require('koa-router');

川长思鸟来/ 2021年07月24日 16:00/ 0 赞/ 763 阅读