<!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. unzip解压war包并覆盖

    unzip -o blog.war -d BLOG 参数: -o 不进行询问直接覆盖 -d 压缩文件解压到BLOG文件夹下 详细使用语法: unzip [-Z] [-opts[modifiers]] ...

  2. css-改变input原始样式

    1.改变input的提示字位置 input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholde ...

  3. ES6学习重难点总结（持续更新）

    Symbol 1.Symbol.iterator Symbol.iterator指向对象的默认遍历器方法: String.prototype[Symbol.iterator] //ƒ [Symbol. ...

  4. 2018最新Python视频教程

    基础+就业Python视频教程需要的加我q:1139721002备注来意

  5. syslog日志打印

    最近syslog出了一次问题,我们配置了不同appname打印到不同文件.现在用不同appname打印log的时候,偶然会混在一起.检查过配置后,觉得不是配置问题,如果是配置问题应该每一条都会打错位置 ...

  6. 测试那些事儿—LR脚本插入DOS命令

    1.基础命令 dir  查看当前目录下的文件和文件夹 cd  目录名:进入特定的目录. md 路径名:建立特定的文件夹. rd 路径名:删除特定的文件夹. cls:清除屏幕. copy 路径\文件名 ...

  7. 图解HTTP阅读笔记（1）-网络基础TCP/IP

    1.TCP/IP协议族 TCP/IP这个概念对大家来说很熟悉,之前我的了解它只是一个协议.今天阅读才知道TCP/IP实际上是一个协议族,其中HTTP协议属于该协议族的一个子集.图1是TCP/IP协议族 ...

  8. C#实现按键计算器功能

    C#实现按键计算器功能 (一次失败的编程) 界面: 代码如下: using System; using System.Collections.Generic; using System.Compone ...

  9. VB中获取网页数据

    以下是在Microsoft Visual Basic 6.0 中文版下做的 VB可以抓取网页数据,所用的控件是Inet控件. 第一步:单击工程-->部件 选择Microsoft Internet ...

  10. 如何注册Tomcat到Window Service服务

    win+R打开运行窗口,输入cmd打开dos窗口,使用cd命令将位置切换到tomcat路径下的bin文件,本机是F盘下. 先输入F:回车进入F盘,然后输入命令cd F:\apache-tomcat-5 ...