<!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第十课学习

    Python第十课学习 www.cnblogs.com/yuanchenqi/articles/5828233.html 函数: 1 减少代码的重复 2 更易扩展,弹性更强:便于日后文件功能的修改 3 ...

  2. 测试那些事儿—软测必备的Linux知识（四）

    1.文件权限管理 ls -l 显示的内容如下: 10个字符确定不同用户能对文件干什么 第一个字符:-表示文件,d表示目录,l表示链接 其余字符每3个一组(rwx),r-读,w-写,x-执行 第一组rw ...

  3. 30天代码day3 Intro to Conditional Statements

    Boolean A logical statement that evaluates to true or false. In some languages, true is interchangea ...

  4. QT 读写配置文件 .ini

    高端大气上档次!码住 读取配置文件: //根据目录寻找配置文件 QSettings* setting = new QSettings("configs/config.ini", Q ...

  5. Linux 配置SSH免密登陆

    1.在hadoop01服务器上 通过ssh -keygen 生成公私钥  [ssh-keygen -t dsa -P '' -f ~/.ssh/id_dsa] 2.把公钥给hadoop02服务器 3. ...

  6. pymongo中的连接操作：Connection()与MongoClient()

    class MongoClient(pymongo.common.BaseObject) Connection to MongoDB. Method resolution order: MongoCl ...

  7. bookmarks

    嵌入式/硬件/计算机原理 PCI ID的分配 ARM汇编指令介绍 (连续4篇) https://blog.csdn.net/makethyme/article/details/1641413https ...

  8. guava学习，集合专题

    lists //JDKList<String> list = new ArrayList<String>();list.add("a");list.add( ...

  9. 18.9 有关设置栈指针sp寄存器r13

    为什么在调用C程序时,要在汇编(.S)文件中设置栈指针sp(Stack Pointer) r13?设置栈指针的时候赋的值是多少,如何确定? .text .global _start _start: / ...

  10. C# System.Collections

    System.collection类: 动态数组ArrayList 代表了可被单独索引的对象的有序集合.也就是说他是一个动态的数组,你可以通过索引来进行增删改等操作,数组会自动调整数组的大小.允许在列 ...