vue 用正则保护路由参数的合法性

本文通过一个实例展示了如何使用Vue.js和Vue-Router进行路由配置和参数传递,包括HTML模板、Vue组件定义及路由匹配等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 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>

 

转载于:https://www.cnblogs.com/Spinoza/p/10600645.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值