当前位置: 首页 > 编程笔记 >

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

景明诚
2023-03-14
本文向大家介绍JS中如何实现Laravel的route函数详解,包括了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'})

总结

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

 类似资料:
  • 本文向大家介绍c++中虚函数的实现详解,包括了c++中虚函数的实现详解的使用技巧和注意事项,需要的朋友参考一下 前言 c++ 分为编译时多态和运行时多态。运行时多态依赖于虚函数,大部分人或许听说过虚函数是由虚函数表+虚函数指针实现的,但,真的是这样吗?虽然 c++ 规范有着复杂的语言细节,但底层实现机制却任由编译器厂商想象。(没准某种特殊的处理器电路结构原生支持虚函数,没准这个处理器压根不是冯纽曼

  • 本文向大家介绍jQuery中extend函数的实现原理详解,包括了jQuery中extend函数的实现原理详解的使用技巧和注意事项,需要的朋友参考一下 extend()是jQuery中一个重要的函数,作用是实现对对象的扩展, 它经常用于jQuery插件的开发,jQuery内部也使用它来扩展属性方法,如上篇文章中讲到的noConflict方法,就是用extend方法来扩展的。 在jQuery的API

  • 本文向大家介绍js的回调函数详解,包括了js的回调函数详解的使用技巧和注意事项,需要的朋友参考一下 现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途。我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题“js的回调函数”相关的东西。       说起回调函数,好多人虽然知道意思,但是

  • 我阅读了Laravel网站、Stack Overflow和Google上的文档,但仍然不理解Route::资源和Route::controller之间的区别。 其中一个答案是Route::resource用于crud。但是,使用Route::controller,我们可以完成与Route::resource相同的任务,并且我们只能指定所需的操作。 他们看起来像兄弟姐妹: 我们如何选择使用什么?什么

  • 本文向大家介绍Go语言 channel如何实现归并排序中的merge函数详解,包括了Go语言 channel如何实现归并排序中的merge函数详解的使用技巧和注意事项,需要的朋友参考一下 前言 初识go语言不到半年,我是一次偶然的机会认识了golang这门语言,看到他简洁的语法风格和强大的语言特性,瞬间有了学习他的兴趣 最近学习 Go,但是苦于没有项目练手,于是便逼迫自己:如果想到什么有趣的东西,

  • 本文向大家介绍Laravel中间件实现原理详解,包括了Laravel中间件实现原理详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Laravel的中间件实现原理。分享给大家供大家参考,具体如下: #1 什么是中间件? 对于一个Web应用来说,在一个请求真正处理前,我们可能会对请求做各种各样的判断,然后才可以让它继续传递到更深层次中。而如果我们用if else这样子来,一旦需要判断的条件