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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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中的PHP_EOL换行符详细解析
2013/10/26 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
一个javascript参数的小问题
2008/03/02 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
python 格式化输出百分号的方法
2019/01/20 Python
python3 反射的四种基本方法解析
2019/08/26 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
硕士研究生个人求职信
2013/12/04 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
初中学校军训方案
2014/05/09 职场文书
亚运会口号
2014/06/20 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
2015员工年度考核评语
2015/03/25 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
活动主持人开场白
2015/05/28 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
技术入股合作协议书
2016/03/21 职场文书
2019各种保证书范文
2019/06/24 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
DE1107机评
2022/04/05 无线电