<!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. 20165228《网络对抗技术》Exp0 Kali安装 Week1

    2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 Kali下载:来自官网 Kali安装 参考自kali安装教程 (因为写博客时已经安装好kali,所以这部分没有自 ...

  2. 常用git操作命令

     查看远程仓库 ->$ git remote -v    如果你本地有一个项目,想把他放到远程git服务器上,那就用上面的命令把项目 add 到远程服务器 ->$ git remote a ...

  3. Mesh内存分配器的mmap小技巧

    最近看了一篇内存分配器的论文,原理很简单,但是里面的数学论证还没看懂,这次先简单写一下原理和用到的API. 内存分配器是用于封装操作系统提供的底层API,给应用程序提供动态内存的.内存不断申请释放后, ...

  4. CSS学习笔记_day3

    一.浮动的清除 1.给祖先元素加高度 <style> * { padding: 0; margin: 0; } .box1 { height: 100px; /**/ } ul { /*去 ...

  5. Linux上更换默认的java版本

    最近注意的一个问题: 在Server上和本地里都使用了相同版本的Tomcat,但是在Server上的tomcat日志里会出现很多java异常的错误, 但是本地的tomcat日志没有出现,初步判断应该是 ...

  6. Blob与Clob转字符串

    /** * blob转字符串 * * @param blob * @return * @throws IOException * @throws SQLException */ public stat ...

  7. adb+monkey压力测试入门

    一.ADB安装步骤及ADB环境配置 1.ADB安装步骤 1)adb工具安装地址:http://www.wmzhe.com/soft-39913.html 2)下载安装包后,解压,将adb安装在根目录下 ...

  8. SpringBoot打成jar包后，获取不到读取resources目录下文件路径的问题

    问题描述: Springboot没有打成jar之前,可以成功获取读取resources目录下xxx.json文件的 路径.但是打成jar包后,接口调不通,原因是获取不到文件的路径. 原因: 在本地进行 ...

  9. java第三章笔记

    java的基本程序设计结构: 1. 声明一个变量之后,必须用赋值语句对变量进行显示初始化,千万不能使用未被初始化的变量. 2.在java中不区分变量的声明与定义. 3.当参与/运算的两个操作数都是整数 ...

  10. 设计模式—模板方法（template method）

    一.定义 百度百科给的定义:定义一个操作中的算法骨架(稳定),而将一些步骤延迟到子类中(变化).Template Method使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 如何做到 ...