<!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. 网易2019校招内推编程题-瞌睡-C++实现

    [编程题] 瞌睡 时间限制:1秒 空间限制:262144K 小易觉得高数课太无聊了,决定睡觉.不过他对课上的一些内容挺感兴趣,所以希望你在老师讲到有趣的部分的时候叫醒他一下.你知道了小易对一堂课每分钟 ...

  2. 日志管理中获取浏览器、操作系统、IP等信息。。。

    今天在书写日志管理的模块的时候,遇到了一些问题,首先是日志的添加,就是在登录的时候记下他登录的名字以及登录的时间和登录的一些信息给存入到日志表中,这一下给蒙了,于是就查找资源,在这里我就简单地总结一下 ...

  3. 浅谈在java中list集合的排序问题

    定义实体类: public class Person { private Integer id; private String name; private Integer age; public In ...

  4. 在JSP中使用el函数标签获取默认值(男女性别选项)

    http://blog.csdn.net/b10060224/article/details/45771025

  5. 09_java基础——this

    多次调用同一个对象的某个方法: package com.huawei.test.java04; /** * This is Description * * @author 王明飞 * @date 20 ...

  6. 几个NAND/NOR门可以表示一个XOR门？

    这段时间就是在看测试相关的东西,无意之中发现了ISCAS85中有个名词EXOR,愣了一下反应过来应该还是异或门,毕竟叫exclusive-OR gate,其中文档中还提到了一句一个异或门可以由四个与非 ...

  7. SERvet的表单

    首先要建立好数据库. 好了,先写好两个静态页面,分别负责登录和注册. 代码清单1:login.jsp(登录页面) <%-- Document : login Created on : 2013- ...

  8. PTA——字符串逆序

    PTA 7-59 字符串逆序 #include<stdio.h> #include<string.h> #define N 81 int main() { int i; cha ...

  9. [小明打联盟][斜率/单调队列 优化dp][背包]

    链接:https://ac.nowcoder.com/acm/problem/14553来源:牛客网 题目描述 小明很喜欢打游戏,现在已知一个新英雄即将推出,他同样拥有四个技能,其中三个小技能的释放时 ...

  10. BZOJ 4265 货币系统

    今天比赛的时候做到的.题解写得很简单,但是感觉对于我这种蒟蒻还是很有思考的价值的. 题面(由于题面很短,就不概括了):小Q当上了新的宇宙大总统,他现在准备重新设计一套货币系统. 这个货币系统要求一共有 ...