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从头学起第一讲
Jul 04 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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语法速查表
2006/12/06 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
php微信公众号开发之简答题
2018/10/20 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
合作投资意向书
2014/04/01 职场文书
水毁工程实施方案
2014/04/01 职场文书
党的生日活动方案
2014/08/15 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
面试通知邮件
2015/04/20 职场文书
安全学习心得体会范文
2016/01/18 职场文书
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL