脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS实现Laravel的route函数

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

 更新时间：2017年02月12日 14:42:14   作者：leo108  
这篇文章主要给大家介绍了JS中是如何实现Laravel的route函数，文中通过示例代码介绍的很详细，相信对大家具有一定的参考价值，有需要的朋友们下面来一起看看吧。

大家应该都知道在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 Error 对象 错误处理

    javascript Error 对象 错误处理

    javascript常见error对象处理，错误代码集合
    2008-05-05
  • javascript中setInterval的用法

    javascript中setInterval的用法

    这篇文章主要介绍了javascript中setInterval的用法的相关资料,需要的朋友可以参考下
    2015-07-07
  • 利用JS实现数字增长

    利用JS实现数字增长

    做项目时候常常遇到，要做一个数字滚动增加的效果。如何利用JavaScript实现数字增长效果，一起来跟本文学习学习。
    2016-07-07
  • 基于JS实现01支付后的10秒倒计时

    基于JS实现01支付后的10秒倒计时

    这是一个通过js实现的支付后的页面，点击支付会跳出一个弹窗，提示你是否要确定支付，确定后进入付后界面，该页面有着10秒倒计时，计时结束后便会返回原界面，也可以选择立刻返回，来返回主页面，这篇文章主要介绍了基于JS实现01支付后的10秒倒计时,需要的朋友可以参考下
    2023-03-03
  • 谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

    谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

    这篇文章给大家介绍了谷歌showModalDialog()方法不兼容出现对话窗口的解决办法，解决办法非常好，感兴趣的朋友可以参考下
    2016-02-02
  • javascript读写json示例

    javascript读写json示例

    JSON是一种简单的数据格式，比xml更轻巧，在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包，下面有个示例，大家可以参考下
    2014-04-04
  • JavaScript中关于数组的调用方式

    JavaScript中关于数组的调用方式

    这篇文章主要介绍了JavaScript中关于数组的调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • layui导航栏二级菜单不显示问题及解决

    layui导航栏二级菜单不显示问题及解决

    这篇文章主要介绍了layui导航栏二级菜单不显示问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • JavaScript获取和设置CheckBox状态的简单方法

    JavaScript获取和设置CheckBox状态的简单方法

    这篇文章介绍了JavaScript获取和设置CheckBox状态的简单方法，有需要的朋友可以参考一下
    2013-07-07
  • JavaScript中运算符规则和隐式类型转换示例详解

    JavaScript中运算符规则和隐式类型转换示例详解

    JavaScript中运算符规则的隐式类型转换是什么? 这是每个学习Javascript的新手们都应该知道的一个问题，下面这篇文章主要给大家介绍了关于JavaScript中运算符规则和隐式类型转换的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09

最新评论