<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

     <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>

 </head>

 <body>

 <div id="hdcms">

     <router-link to="/content">内容 </router-link>

     <router-view></router-view>

 </div>

 <script type="text/x-template" id="content">

     <div>

         cid:{{$route.params.cid}}

         <br>

         <button @click="show">检测参数</button>

     </div>

 </script>

 <script>

     const content={

         template:'#content',

         methods:{

             show(){

                 console.log(this.$route.params);

             }

         }

     }

     let routes=[

         {path:'/content/:cid(\\d{2}).html',component:content},

     ];

     //要把组件交给路由器

     let router = new VueRouter({routes});

     new Vue({

         el: '#hdcms',

         router

     });

 </script>

 </body>

 </html>

vue 用正则保护路由参数的合法性的更多相关文章

  1. 057——VUE中vue-router之路由参数默认值的设置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 056——VUE中vue-router之路由参数的验证处理保存路由安全

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 055——VUE中vue-router之路由参数的随意设置与伪静态链接地址处理：

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue中监听路由参数变化

    今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面  /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...

  5. vue中监听路由参数的变化

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...

  6. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  7. Vue路由获取路由参数

    vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录&l ...

  8. Vue路由参数

    vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...

  9. VUE 路由参数改变重新刷新数据

    VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...

随机推荐

  1. python vtk 通过回调函数监测键盘”Up”键动作，每按一次方向上键，actor变换一种颜色

    import vtk class KeyPressInteractorStyle(vtk.vtkInteractorStyleTrackballCamera): def __init__(self,p ...

  2. redis命令Map类型（五）

    如果存储一个对象 这个时候使用String 类型就不适合了,如果在String中修改一个数据的话,这就感到烦琐. hash 散列类型 ,他提供了字段与字段值的映射,当时字段值只能是字符串类型 命令: ...

  3. ELK简单安装测试

    1 介绍组件 Filebeat是一个日志文件托运工具,在你的服务器上安装客户端后,filebeat会监控日志目录或者指定的日志文件,追踪读取这些文件(追踪文件的变化,不停的读). Kafka是一种高吞 ...

  4. storm入门基础实例（无可靠性保证实例）

    本实例为入门篇无可靠性保证实例,关于storm的介绍,以及一些术语名词等,可以参考Storm介绍(一).Storm介绍(二). 本案例是基于storm0.9.3版本 1.案例结构 案例:Word Co ...

  5. 锦囊9-if语句

    [程序描述] 编写程序,通过使用 if...elif...else 语句判断数字是正数.负数或零: [程序分析] 正数.负数或零的判断非常简单,只需要判断这个数是否大于零,小于零或者等于零.由于判断的 ...

  6. phpStudy 切换版本后没有权限的问题

    在httpd-vhosts.conf配置如下: <VirtualHost *:80> ServerName www.jy.com DocumentRoot "C:\htdocs\ ...

  7. 图的深度优先遍历(DFS)—递归算法

    实验环境:win10, DEV C++5.11 实验要求: 实现图的深度优先遍历 实验代码: #include <iostream> #define maxSize 255 #includ ...

  8. C语言-第4次作业得分

    作业链接:https://edu.cnblogs.com/campus/hljkj/CS201801/homework/2523 作业链接:https://edu.cnblogs.com/campus ...

  9. hello1实例的分析

    JSF简介一. 什么是 JSF:JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的新标准 Java 框架.它提供了一种以组件为中心来开发 Java Web 用户界面的方法 ...

  10. js ·节点的知识点

    1. DOM document object model (1) 节点树状图 Document>documentElement>body>tagname 2. 我们常用的节点类型 元 ...