Question

我有一个Laravel + VueJS应用程序。例如，当用户选择新的一年时，我想更改网址。

用户使用url idea / [IDEA_ID] / [YEAR]并在页面内更改年份，因此我想设置url，但其余工作是通过axios调用完成的。

这是我现在的工作方式：

Route::get('idea/{n}/{m}', 'IdeaController@idea')->name('idea');

class IdeaController extends Controller
{
    public function idea($id, $year)
    {
        $sql =  "";
        $array = DB::connection('ideas')->select( DB::connection('ideas')->raw($sql));

        return view('ideas/idea', ['idea' => json_encode($array)] );
    }
}

刀片视图：

@extends('template')

@section('content')
<div>
    <div id="app">
        <ideapage ideas="{{ $idea }}"></ideapage>
    </div>
</div>
@endsection

在Vue视图（ideapage）中，我拥有所有逻辑，仅发出axios请求。问题是，例如，当用户更改年份时，我想在Vue视图中更改URL。

因此，我想知道我是否做得很好。在laravel刀片视图内分离组件是否是一个更好的主意？网址更改后，如何只更改部分？

我没有使用VueRouter：路由仅在web.php中。

非常感谢。

Answer 1

经过深思熟虑，我暂时没有更改架构，只在年份或想法发生变化时才使用history.pushstate

idea.vue

    watch: {
        idea: function() {
          history.pushState({}, null, '/idea/'+this.idea +'/'+this.year)
        },
        year: function() {
          history.pushState({}, null, '/idea/'+this.idea +'/'+this.year)
        }
    },

如何在不刷新页面的情况下设置url（Laravel + vueJS）

1 个答案: