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

最新推荐文章于 2024-12-31 10:28:26 发布

转载最新推荐文章于 2024-12-31 10:28:26 发布 · 486 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Spinoza/p/10600645.html

文章标签：

#javascript #ViewUI

本文通过一个实例展示了如何使用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>