JS中如何实现Laravel的route函数详解


Posted in Javascript onFebruary 12, 2017

大家应该都知道在Laravel的路由模块里,我们可以给每一个路由设定一个名字,比如:

Route::get('/blog/{blog}', 'BlogController@show')->name('blog.show')

然后就可以通过

route('blog.show', ['blog' => 1])

来获取到这个路由的访问地址,后端跳转可以用

return redirect()->route('blog.show', ['blog' => 1]);

这样做的好处是如果发生url变更,比如我想把 '/blog/{blog}'改成 '/boke/{blog}' ,只需要改路由文件,别的地方都不用调整。

但这个仅限于后端,以及blade模板可以使用,稍微上点规模的网站都会把js文件单独拎出来,不会直接写在blade模板中,这样就导致js里发ajax请求时或者页面跳转时只能将请求地址写死,比如

location.href = '/blog/' + id;

这样万一路由发生变更,还得去修改js文件,如果同一个路由被多个js调用,漏改一两个还是很容易发生的。所以我就考虑能不能在js中实现一个类似后端的route函数。

最终的解决方案很简单,两个函数就搞定。

后端部分需要实现一个函数

function route_uri($name)
{
 return app('router')->getRoutes()->getByName($name)->getUri();
}

这个函数的作用是根据路由名称返回原始的路由地址,比如:

echo route_uri('blog.show'); // 会输出/blog/{blog}

前端也只需要一个函数:

let route = (routeUrl, param) => {
 let append = [];
 for (let x in param) {
  let search = '{' + x + '}';
  if (routeUrl.indexOf(search) >= 0) {
   routeUrl = routeUrl.replace('{' + x + '}', param[x]);
  } else {
   append.push(x + '=' + param[x]);
  }
 }
 let url = '/' + _.trimStart(routeUrl, '/');
 if (append.length == 0) {
  return url;
 }
 if (url.indexOf('?') >= 0) {
  url += '&';
 } else {
  url += '?';
 }
 url += append.join('&');
 return url;
}

注:这里引用了lodash

这个函数的作用是:

route('/blog/{blog}', {blog: 1}); //返回 /blog/1
route('/blog/{blog}', {blog: 1, preview: 1}); //返回 /blog/1?preview=1

然后就很简单了,在blade模板中定义:

var routes = {
 blog: {
  show: '{{ route_uri('blog.show') }}',
  update: '{{ route_uri('blog.update') }}',
  destroy: '{{ route_uri('blog.destroy') }}'
 }
};

在js文件里就可以:

$.post(route(routes.blog.update, {blog: 1}), {title: 'xxx', content: 'xxx'})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
js 数组 fill() 填充方法
Nov 02 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 #Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 #Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 #Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 #Javascript
浅谈jQuery中事情的动态绑定
Feb 12 #Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 #Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 #Javascript
You might like
php转换颜色为其反色的方法
2015/04/27 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
JavaScript 基础问答三
2008/12/03 Javascript
删除节点的jquery代码
2014/01/13 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
Python实现文件复制删除
2016/04/19 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
大课间体育活动方案
2014/03/12 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
项目合作协议书
2014/09/23 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
小学德育工作总结2015
2015/05/12 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
Python Flask实现进度条
2022/05/11 Python
vue实现简易音乐播放器
2022/08/14 Vue.js