动态路由就是带参数的路由。比如我们商品列表里很多商品详细页,这时候就需要动态路由的帮助了。

比如我们新建一个commodity文件夹,新建一个index.vue 文件,然后新建一个_id.vue (以下画线为前缀的Vue文件就是动态路由,然后在文件里边有 $route.params.id来接收参数)

index.vue (可以写三种方式):

<a href="/commodity/123">commodity</a>
<nuxt-link to="/commodity/123">commodity2</nuxt-link>
<nuxt-link :to="{name: 'commodity',params:{id: 123}}">commodity3</nuxt-link>  (推荐这种写法)

_id.vue:

<h2>commodity-Content [{{$route.params.id}}]</h2>

校验传递参数的正确性是很有必要的,Nuxt.js也贴心的为我们准备了校验方法validate( )。

_id.vue:

export default {

  validate ({ params }) {
// Must be a number
return /^\d+$/.test(params.id)
} }

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

Nuxt配置动态路由以及参数校验的更多相关文章

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

    其实动态路由就是带参数的路由.比如我们现在新闻模块下面有很多新闻详情页,这时候就需要动态路由的帮助了. 新闻详细页面我们在news文件夹下面新建了_id.vue的文件,以下划线为前缀的Vue文件就是动 ...

  2. vue-router2.0动态路由获取参数

    一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"& ...

  3. flask之web网关、三件套、配置、路由(参数、转化器及自定义转化器)、cbv、模板语言、session

    目录 1.wsgiref.py 2.werzeug.py 3.三件套 4.配置文件 5.路由本质 6.cbv.py 7.路由转化器 8.自定义转化器 9.模板语言 10.session原理 11.te ...

  4. vue-router动态路由设置参数可选

    在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上. 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 ...

  5. H3C路由器配置——动态路由OSPF协议

    一.介绍 1.OSPF协议介绍 (1).OSPF(Open Shortest Path First,开放最短路径优先)路由协议是用于网际协议(IP)网络的链路状态路由协议.是一个被各厂商设备广泛支持的 ...

  6. H3C路由器配置——动态路由RIP协议

    一.静态路由的不足 静态路由适用于:小规模的网络.架构不怎么调整的网络.没有环路的网络 二.RIP协议工作过程 2.1.工作特点 n路由信息协议RIP(Routing Information Prot ...

  7. vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为

    vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...

  8. vue 动态路由 Get传值

    main.js //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', compone ...

  9. VueRouter爬坑第二篇-动态路由

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

随机推荐

  1. 在vue项目中显示实时时间(年月日时分秒)

    1.在data中定义一个变量,存储时间 data(){ return { nowTime:'' } }, 2.给定一个div <div>{{nowTime}}</div> 3. ...

  2. Spring与RestHighLevelClient

    Elasticsearch连接方式有两种:分别为TCP协议与HTTP协议 最近使用es比较多,之前使用一直是使用spring封装的spring-data-elasticsearch:关于spring- ...

  3. idea 配置 tomcat 教程

    最近在搞一个项目需要用到idea 配置tomcat,翻了翻网上的帖子发现稂莠不齐,最后决定还是自己写个吧!(其实我挺蠢的走了好多的弯路,哎~) 1.首先准备一个需要大家tomcat的工程,然后使用id ...

  4. JDBC——Statement执行SQL语句的对象

    Statement该对象用于执行静态SQL语句并返回它产生的结果.表示所有的参数在生成SQL的时候都是拼接好的,容易产生SQL注入的问题 PreparedStatement对象是一个预编译的SQL语句 ...

  5. Centos7更改网卡名称Eth0

    标签: Centos7更改网卡名称 2016-12-06 21:55 8737人阅读 评论(1) 收藏 举报  分类: linux(6)  作者同类文章X 版权声明:本文为博主原创文章,未经博主允许不 ...

  6. mybatis(五):源码分析 - 参数映射流程

  7. 导入org.apache.poi.xssf 读取excel

    POI 操作 excel  用XSSF 方式时,如果不能自动导入 org.apache.poi.xssf 对应jar 包,则可以Apache 官网进行下载,自行导入. step1: 访问 http:/ ...

  8. 题解【洛谷P2003】平板

    题面 由于本题中\(n\)很小,\(\Theta(n^2)\)的暴力也可以通过. 具体可参照洛谷题解区 #include <bits/stdc++.h> #define itn int # ...

  9. 回顾 Monty Hall (三门问题)

    一.问题描述 Monty Hall Problem 源于美国的一档电视节目<Let's Make a Deal>,其中Monty Hall 是这个节目的主持人. 节目中有三扇门1.2.3, ...

  10. Oracle Data Guard搭建 1.虚拟机安装linux

    1.安装虚拟机 VMware 14 2.下载Linux镜像文件,创建虚拟机