<!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. Celery和Rabbitmq自学

    异步消息队列,也能用于定时和周期性任务.每次修改的task代码还要重启worker,这个有点麻烦 所有带task()装饰器的可调用对象(usertask)都是celery.app.task.Task类 ...

  2. git-【四】撤销修改和删除文件操作

    一:撤销修改: 比如我现在在readme.txt文件里面增加一行 内容为555555555555,我们先通过命令查看如下: 在未提交之前,发现添加5555555555555内容有误,所以得马上恢复以前 ...

  3. OOP理解

    https://www.cnblogs.com/xiaosongluffy/p/5072501.html OOP是面向对象编程,有几大基础特性.抽象,封装,继承,多态 1:抽象:将世界上的具体事物提取 ...

  4. 后台管理系统-使用AdminLTE搭建前端

    返回总目录<ABP项目实战-后台管理系统-目录> 安装AdminLte 我们通过Nuget包管理器安装AdminLte 引用三方组件 因为AdminLte使用到了很多三方的组件,所以我们需 ...

  5. Django：学习笔记(8)——文件上传

    Django:学习笔记(8)——文件上传 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不 ...

  6. NiFi REST API 的使用

    一.概述 为方便用户使用 NiFi 进行二次开发,NiFi 为开发者提供了 NIFI REST API. 关于 API 的详细介绍,请参见官网 NIFI REST API.这里仅给出一些注意的小细节. ...

  7. EditPlus 4.3.2487 中文版已经发布（11月12日更新）

    新的版本修复了粘贴多重选择文本的问题,以及增加了横向扩展列选模式选择范围的快捷键(Ctrl+Alt+→/←).

  8. 20145319 return-to-libc攻击实验

    20145319 Return-to-libc攻击实验 一 实验内容 return-to-libc实验是一个基于缓冲区溢出攻击实验的基础上的一种攻击实验 缓冲区溢出攻击相关知识: 原理:通过一段包含s ...

  9. Python3基础 print %d 输出整数

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  10. windows下利用批处理脚本监控程序

    1.要监控的程序为使用cygwin环境编译的exe可执行文件hello.exe,源码如下: #include <stdio.h> #include <unistd.h> voi ...