<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue-router之路由参数的验证处理保存路由安全</title>

    <script src="vue.js"></script>

    <script src="vue-router.js"></script>

</head>

<body>

<div id="demo">

    <router-link to="/content">链接</router-link>

    <br/>

    <router-view></router-view>

</div>

<script type="text/x-template" id="content">

    <div>

        id:{{$route.params.id}}

        <br/>

        <button @click="show">点击效果</button>

    </div>

</script>

<script>

    const content = {

        template: "#content",

        methods: {

            show() {

                console.log(this.$route.params);

            }

        }

    }

    let routes = [

        {path: '/content/:id(\\d{2})', component: content}

    ]

    let router=new VueRouter({routes});

    new Vue({

        el: "#demo",

        router

    });

</script>

</body>

</html>

　　

056——VUE中vue-router之路由参数的验证处理保存路由安全的更多相关文章

  1. Vue中this.$router.push（参数） 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

  2. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  3. 去掉vue 中的代码规范检测（Eslint验证）

    去掉vue 中的代码规范检测(Eslint验证): 1.在搭建vue脚手架时提示是否启用eslint检测的. Use ESLint to lint your code? 写 no; 2.如果项目已经生 ...

  4. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  5. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  6. 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数

    1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. vue中的router和route有什么区别？

    我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...

  8. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  9. Vue中this.$router.push参数获取（通过路由传参）【路由跳转的方法】

    传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...

随机推荐

  1. 自动化工具构建vue项目

    其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记.但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法.就算是在实际项 ...

  2. pandas 从txt读取DataFrame&DataFrame格式化保存到txt

    前提 首先保证你txt里的文本内容是有规律可循的(例如,列与列之间通过“\t”.“,”等指定的可识别分隔符分隔): 例如我需要读取的数据,(\t)分隔: (此文件内容是直接以DataFrame格式化写 ...

  3. ovn-sb 摘要

    1.Database Structure Physical network table中包含了和chassis nodes有关的所有信息,包括用于overlay所需的IP地址,支持的tunnel类型以 ...

  4. 符合语言习惯的 Python 优雅编程技巧

    Python最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净.整洁.一目了然.要写出 Pythonic(优雅的.地道的.整洁的)代码,需要多看多学大牛们写的代码,github 上有很多非常优秀 ...

  5. 将expression转化为数据类型int时发生算术溢出错误

    在SQL Server 中,某列的数据都在int范围之内,但是使用sum聚集函数求该列和的时候,出现“将expression转化为数据类型int时发生算术溢出错误”. 问题在于定义的数据类型: 首先, ...

  6. IOS使用Core-Plot画折线图

    关于Core-Plot的配置.大家能够參考我的上一篇博客:http://1.wildcat.sinaapp.com/?p=99 版权全部.转载请注明原文转自:http://blog.csdn.net/ ...

  7. loadNibNamed:(NSString *)name owner:(nullable id)owner options:(nullable NSDictionary *)options用法

    1.name xib的名字 owner当前类对象 options初始参数 实际应用: NSArray *nibs = [[NSBundle mainBundle] loadNibNamed:@&quo ...

  8. 使用JAVA实现语音朗读一段文本

    需要做的工作: 1.下载  jacob-1.17-M2 或 jacob-1.18 2.解压jacob-1.17-M2 或 jacob-1.18 3.向工程里导入jacob.jar 4.将 jacob- ...

  9. 怎样使用CSS设置文字与文字间距距离？

    [文字与文字间距距离,字与字距离间距CSS如何设置?]如果你也遇到W3Cschool用户唐婷大小姐类似的问题不妨也到W3Cschool编程问答进行提问. 对于使用CSS解决字间距的方法W3Cschoo ...

  10. 通过Python来操作kylin

    起因: 老大要求的数据,无法通过kylin里面的SQL查询到,只能通过调用接口来实现需求 第一步,安装依赖的包(py2/py3都支持,我这边用的是py2) pip install kylinpy pi ...