<!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. 08_java基础知识——方法重载

    一.自变量顺序不同 package com.huawei.test.java04; /** * This is Description * * @author 王明飞 * @date 2018/08/ ...

  2. docker的网络访问

    Docker的网络访问: #systemctl  start docker #ifconfig [root@zizhen02 ~]# ifconfig docker0: flags=4099<U ...

  3. Android Studio解决Error:moudle not specified

    在使用Android Studio 进行Builder APKs的时候,如果发现无法degub, 进行配置的时候 没有module可以进行指定,如果所示(借个图) 问题的原因一般是Grade File ...

  4. 动态改变Spring定时任务执行频率

    @Component@EnableSchedulingpublic class updateCronTask implements SchedulingConfigurer { public stat ...

  5. 在Vuex使用 以及 dispatch和commit来调用mutations的区别

    main.js中 import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: &q ...

  6. Lucene架构

    先整体上看一下Lucene的架构设计图(见下图),先看上层应用,首先是信息采集的过程,文件系统.数据库.万维网以及手工输入的文件都可以作为信息采集的对象,也是要搜索的文档的来源,采集万维网上的信息一般 ...

  7. js Number string

    Number string number Js只有一种数字类型(包括整型,浮点型) 极大或极小的可用科学计数法来表示.(7.7123e+1) 所有js数字均为64位 Js所有的数字都存储为浮点型 小数 ...

  8. OnTriggerEnter2D方法

    我两个物体A,B都添加了Circle Collider 2D,并且都勾选了is Trigger,我在A的脚本里用void OnTriggerEnter2D(Collider2D coll)检测碰撞,至 ...

  9. Mac os x 系统的发展史

    ·Mac OS 9:发布时间:1999年 于1999年发布的Mac OS 9操作系统(图片来自互联网) 在OS X之前,1999年发布的Mac OS 9看起来就是一个普通的桌面操作系统.并且现在已经被 ...

  10. git 创建删除分支

    进入仓库目录 -- 查看本地分支 git branch -- 查看远程分支 git branch -r -- 查看远程和本地的分支 git branch -a -- 下载远程分支代码,并切换到分支 进 ...