Nuxt的动态路由及路由校验入门

其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详情页,这时候就需要动态路由的帮助了。

新闻详细页面
我们在news文件夹下面新建了_id.vue的文件,以下划线为前缀的Vue文件就是动态路由,然后在文件里边有$route.params.id来接收参数。

/pages/news/_id.vue

<template>
    <div>
        <h2>News-Content{{$route.params.id}}</h2>
        <ul>
            <li><a href="/">Home</a></li>
        </ul>
    </div>
</template>

修改新闻首页路由
我们在/pages/news/index.vue进行修改,增加两个详细页的路由news-1和news-2.

<template>
  <div>
    <h2>News Index page</h2>
    <p>NewsId: {{$route.params.newsId}}</p>
    <ul>
      <li>
        <nuxt-link to="/">Home</nuxt-link>
      </li>
       <li>
        <nuxt-link to="/news/123">news-1</nuxt-link>
      </li>
       <li>
        <nuxt-link to="/news/456">news-2</nuxt-link>
      </li>
    </ul>
  </div>
</template>

动态参数校验
进入一个页面,对参数传递的正确性校验是必须的,Nuxt.js也贴心的为我们准备了校验方法validate()。
/pages/news/_id.vue

<template>
  <div>
    <h2>News-Content [{{$route.params.id}}]</h2>
    <ul>
      <li>
        <nuxt-link to="/">Home</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  validate ({ params }) {
    return /^\d+$/.test(params.id)
  }
}
</script>

/pages/news/index.vue

<template>
  <div>
    <h2>News Index page</h2>
    <p>NewsId: {{$route.params.newsId}}</p>
    <ul>
      <li>
        <nuxt-link to="/">Home</nuxt-link>
      </li>
       <li>
        <nuxt-link to="/news/123">news-1</nuxt-link>
      </li>
       <li>
        <nuxt-link to="/news/chencheng">news-2</nuxt-link>
      </li>
    </ul>
  </div>
</template>

我们使用了validate方法,并把params传递进去,然后用正则进行了校验,如果正则返回了true正常进入页面,如果返回false进入404页面。

原文地址:https://www.cnblogs.com/chen-cheng/p/11970621.html

时间: 2024-11-10 13:51:44

Nuxt的动态路由及路由校验入门的相关文章

路由的几个基本概念-直连路由/网关路由/主机路由/网络路由/动态路由/静态路由/默认路由

1.动态路由/静态路由 动态路由 路由选择器自动共享路由信息 自动构造路由表,需要一个路由协议,如RIP或OSPF 静态路由 路由选择器不共享路由信息(单方向路由) 手工构造路由表 2.直连路由/网关路由(间接路由) 其区别在于,发往直连路由的设备中不但具有指明目的端的I P地址,还具有其mac地址. 当报文被发往一个间接路由时,I P地址指明的是最终的目的地,但是mac地址指明的是网关(即下一跳路由器). 3.主机路由/网络路由 直连路由和网关路由是由下一跳区分的,而主机路由和网络路由是由目的

Nodejs动态加载路由,Nodejs遍历目录,Nodejs路由工具

工具来源: Nodejs需要手动加载路由文件,如果一个个添加,项目逐渐扩大,比较麻烦. 尤其在项目route目录下,增加模块文件夹的时候,引入路由更是麻烦. 因此写了一个Nodejs动态加载路由,Nodejs遍历目录,Nodejs路由工具,取名为route.js. 支持无限级别目录结构,自动递归引用.有任何更好的建议,欢迎随时留意交流. 使用方法: 1.文件:app.js同级目录增加route.js文件,复制下面贴出源代码: 2.引入:app.js中引入:var route = require(

IT菜鸟之路由器基础配置(静态、动态、默认路由)

路由器:连接不同网段的设备 企业级路由和家用级路由的区别: 待机数量不同(待机量) 待机量:同时接通的终端设备的数量 待机量的值越高,路由的性能越好 别墅级路由,表示信号好,和性能无关 交换机:背板带宽(专业术语)是内部的传输速度 网关:是用来处理不同网段数据通信 网关地址一般是路由器的地址 no 任何生效性的操作都可以使用no使其失效 rip Routing Information Protocol 路由信息协议 destination host unreachable 目标主机不可达 sho

[路由设置及视图入门]

1.应用全局应用程序文件配置路由规则 2.熟悉Razor语法及HtmlHelper的使用 本文目录 1.MVC的路由设置 2.Razor的语法及使用 3.HtmlHelper的使用 1.MVC的路由设置 路由设置网上介绍的也很多了,在此也提供一篇较好的文章供大家学习.http://www.cnblogs.com/QLeelulu/archive/2008/10/03/1303612.html 为了方便大家能够快速的理解路由,在这里我用白话再解释一遍: 首先看下面两个地址: 地址一:http://

第七课 路由之路由注册

1 路由注册 定义/概念: 例子: (1)动态方法 //Route::get('a/:id/:name/','admin/admin/index'); //Route::get('test','index/index/index'); //Route::get('hello', 'index/hello'); Route::get('test/:id/:name','index/index/index'); //Route::get('test/:name','admin/admin/index

Angular routing生成路由和路由的跳转

Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配置好路由的项目 命令创建项目 ng new demo02 --routing 安装依赖 npm install 启动项目 ng serve --open 与没有创建路由的项目比较 创建路由项目的文件比没有创建路由项目的文件多了一个 app-routing.module.ts 文件. 然后在 app.

静态路由实现路由负载分担

静态路由简介 扫描二维码关注微信公众号:网络民工 获取更多内容静态路由是一种需要管理员手工配置的特殊路由.静态路由比动态路由使用更少的带宽,并且不占用CPU资源来计算和更新路由.但是当网络发生故障或者拓扑发生变化后,静态路由不会自动更新,必须手动重新配置.静态路由有5个主要的参数:目的地址和掩码.出接口和下一跳.优先级. 使用静态路由的好处是配置简单.可控性高,当网络结构比较简单时,只需配置静态路由就可以使网络正常工作.在复杂网络环境中,还可以通过配置静态路由改进网络的性能,并且可以为重要的应用

AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Directive)

一.定义路由 ng-view - AngularJS 支持通过在单页面上的多个视图的单页应用 - ng-view 标记只是简单地创建一个占位符 - 使用 ng-template - 创建使用script标签的HTML视图 - 使用 - 定义类型作为主模块中 ng-template 的脚本块 $routeProvider - 映射相应的HTML页面或ng-template - 附加一个控制器使用相同键的服务   - 注意: - 需要angular-route.js脚本文件的引用 二.使用路由 锚点

[水煮 ASP.NET Web API2 方法论](3-2)直接式路由/属性路由

问题 怎么样可以使用更贴近资源(Controller,Action)的方式定义路由. 解决方案 可以使用属性路由直接在资源级别声明路由.只要简单的在 Action 上使用属性路由 RouteAttribute,然后传一个相关路由模板就可以.属性路由与集中式路由在路由模板含义上基本是一样的,所有路由参数应该使用花括号,同时要与使用的 Action 相匹配.直接式路由支持默认路由,可选参数,约束.详细分析请往下走. 1 [Route("api/teams/{id}")] 2 public

高级静态路由之路由过滤(一)

一.说明 1.ip route命令 ip route [dest-network] [mask] {next-hop address | exit interface | ip-address]} [administrative distance] [permanent] dest-network:目的网络 mask:目的网络子网掩码 next-hop address:去往目的网络的下一跳ip地址 exit interface:去往目的网络的出站接口 administrative distanc