1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> 6 <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script> 7 </head> 8 <body> 9 <div id="hdcms"> 10 <router-link to="/content">内容 </router-link> 11 <router-view></router-view> 12 </div> 13 <script type="text/x-template" id="content"> 14 <div> 15 cid:{{$route.params.cid}} 16 <br> 17 <button @click="show">检测参数</button> 18 </div> 19 </script> 20 <script> 21 const content={ 22 template:'#content', 23 methods:{ 24 show(){ 25 console.log(this.$route.params); 26 } 27 } 28 } 29 let routes=[ 30 {path:'/content/:cid(\\d{2}).html',component:content}, 31 ]; 32 //要把组件交给路由器 33 let router = new VueRouter({routes}); 34 new Vue({ 35 el: '#hdcms', 36 router 37 }); 38 </script> 39 </body> 40 </html>
vue 用正则保护路由参数的合法性
猜你喜欢
转载自www.cnblogs.com/Spinoza/p/10600645.html
今日推荐
周排行