<!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. LAMP开发(1)

    apache web服务器软件,最近款的有7兆大小,工作:监听端口,接收请求,解析HTTP协议,转发给PHP比如:当一个客户端的请求发过来的时候,通常客户端(浏览器),请求发送给某一台IP,这个IP肯 ...

  2. tomcat设置编码格式utf8

    利用request.setCharacterEncoding("UTF-8");来设置Tomcat接收请求的编码格式,只对POST方式提交的数据有效,对GET方式提交的数据无效! ...

  3. 小米范工具系列之十:小米范SSH批量命令执行工具

    小米范SSH批量命令执行工具的主要功能是自动登录多台机器,并执行指定的命令,比如批量抓取shadow.批量获取系统版本.或者做基线时批量抓取配置等. 此工具使用java 1.8以上版本运行. 界面如下 ...

  4. vsftpd文件服务器安装与配置

    -d<登入目录>:指定用户登入时的启始目录:. -s<shell>:指定用户登入后所使用的shell: /sbin/nologin指的是不允许login当前Linux系统.当用 ...

  5. sql server 2008维护计划配置

    转自:https://blog.csdn.net/yunye114105/article/details/6594826 一:目标任务: 使用SQL Server 2008自带的维护计划自动备份数据库 ...

  6. android 控件加圆角

    1.新建一个radius_border.xml <shape xmlns:android="http://schemas.android.com/apk/res/android&quo ...

  7. Windows mysql默认字符集修改

    一.通过MySQL命令行修改: set character_set_client=utf8; set character_set_connection=utf8; set character_set_ ...

  8. docker——libnetwork插件网络功能

    从1.7.0版本开始,Docker正是把网络和存储这两部分的功能都以插件化形式剥离出来,允许用户通过指令来选择不同的后端实现.剥离出来的独立容器网络项目叫libnetwork,从名字就能看出,它希望将 ...

  9. (13)如何使用Cocos2d-x 3.0制作基于tilemap的游戏:第一部分

    引言 程序截图: 本教程将会教大家如何使用Cocos2d-x来做一个基于tile地图的游戏,当然还有Tiled地图编辑器.(我们小时候玩的小霸王小学机里面的游戏,大部分都是基于tile地图的游戏,如坦 ...

  10. 20155203 2016-2017-4 《Java程序设计》第8周学习总结

    20155203 2016-2017-4 <Java程序设计>第8周学习总结 教材学习内容总结 1.channel的继承架构 2.position()类似于堆栈操作中的栈顶指针. 3.Pa ...