Laravel blade模板如何把js参数传递到route方法中

当使用到了带有参数的路由名称时，如何在blade视图模板中把javascript参数传递到route()函数中？

这是一个经常碰到的问题，当发现按照正常的方式来传递参数时，由于参数是js传递过来的，因此报错了。对于这个问题一直没有去解决，而是使用/use/id= + id?这种方法来解决的。这就带来了一个问题，本想全部使用路由名称来使用url，因为这个问题导致了代码中有2种不同的路由方式，当然了这并不是问题。今天，总算是解决了。下面来看来问题。

假设这是编辑一条数据的信息

路由

<span style="color: rgb(255, 255, 255);">Route::get('edit/{id}','TestController@edit')->name('test');</span><br></br>

控制器方法

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">public</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">edit</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$id</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">dd</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$id</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

视图传递参数

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">一般情况下，会这样写</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'/edit/{{$test->id}}'</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">编辑</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'route("test'</span>,[<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'id'</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$test</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>]<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">")'>编辑</a></span></span>

这种情况下，那么问题来了，要是id是javascript中的变量呢？使用route就会报错了。但是使用/edit/{{$test->id}}，那么定义路由名称也就没有任何含义了。

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">由于id是js变量，因此会报错</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"route('test',['id'=>id])"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">编辑</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

下面用一个实际案例来解决问题。

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 这个场景在实际开发中经常遇到，传递过来的参数是js变量</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 而这种传递route参数的方式是错误，因为id是js变量</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">assign_role</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">id</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">okLayer</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">open</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'测试传递参数'</span>,<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'{{ route('</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">test</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">',['</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">id</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'=>id]) }}'</span>,<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'50%'</span>,<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'90%'</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">null</span>, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span>(){</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

下面是解决方法！！！下面是解决方法！！！下面是解决方法！！！

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">assign_role</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">id</span>) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">okLayer</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">open</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'测试传递参数'</span>,<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'{{ route('</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">test</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">',['</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">id</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'=>'</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">xxx</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">']) }}'</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">replace</span>(<span style="box-sizing: border-box;color: rgb(128, 203, 196) !important">/xxx/</span>,<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">id</span>),<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'50%'</span>,<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'90%'</span>, <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">null</span>, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span>(){</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

1）laravel route函数会将路由解析为具体的url，此案例中转为http://test/xxx

2）replace js函数将http://test/xxx中的xxx替换为js变量id

这样就解决了路由参数的问题。