第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Laravel 路由到 Vue.js 路由

Laravel 路由到 Vue.js 路由

PHP
萬(wàn)千封印 2023-06-30 16:20:22
我的 web.php 路由文件中有大約 100 條路由,現(xiàn)在我開(kāi)始使用 vue.js 和 laravel 而不是blade,所以我是否也應(yīng)該在 vue 路由中編寫(xiě)所有 web.php 路由?什么是最好的方法 ?這是我的 web.php laravel 路線(xiàn):Route::post('/dashboard/widget', 'AdminDashboardController@widget')->name('dashboard.widget');    Route::get('clients/export/{status?}/{client?}', ['uses' => 'ManageClientsController@export'])->name('clients.export');    Route::get('clients/create/{clientID?}', ['uses' => 'ManageClientsController@create'])->name('clients.create');    Route::post('clients', ['uses' => 'ManageClientsController@store'])->name('clients.store');    Route::resource('clients', 'ManageClientsController', ['expect' => ['create']]);    ..... and much more ......我如何在 vue.js 中表示這個(gè) laravel 路由,因?yàn)槲业?web.php 中有超過(guò) 100 條路由謝謝
查看完整描述

3 回答

?
ITMISS

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超8個(gè)贊

有一個(gè)庫(kù):https: //github.com/tighten/ziggy

但只有當(dāng)您的 Vue 組件加載到刀片模板內(nèi)時(shí),它才有效,而當(dāng)您有一個(gè)使用 Laravel API 的完全獨(dú)立的 Vue 客戶(hù)端時(shí),它就不起作用。假設(shè)第一種情況,只需安裝庫(kù)并將@routes刀片指令添加到主刀片文件中:

composer require tightenco/ziggy

resources/views/layouts/app.blade.php:

<head>

  <!-- ... -->


  <!-- CSRF Token -->

  <meta name="csrf-token" content="{{ csrf_token() }}">


  <title>{{ config('app.name', 'Laravel') }}</title>


  <!-- Routes -->

  @routes

  <!-- Scripts -->

  <script src="{{ asset('js/app.js') }}" defer></script>


  <!-- ... -->

<head>

然后您將route在 Javascript 和 Vue 文件中獲得該函數(shù),其工作方式與 Laravel 提供的函數(shù)類(lèi)似。


查看完整回答
反對(duì) 回復(fù) 2023-06-30
?
猛跑小豬

TA貢獻(xiàn)1858條經(jīng)驗(yàn) 獲得超8個(gè)贊

將所有內(nèi)容寫(xiě)入新文件,當(dāng)您查詢(xún)時(shí)使用 Promise 以便與 web.php 進(jìn)行通信,請(qǐng)注意,僅查看視圖。這些路線(xiàn)只有在單個(gè)頁(yè)面上才有用。這只是一個(gè)建議。



查看完整回答
反對(duì) 回復(fù) 2023-06-30
?
藍(lán)山帝景

TA貢獻(xiàn)1843條經(jīng)驗(yàn) 獲得超7個(gè)贊

如果我沒(méi)記錯(cuò)的話(huà),你的問(wèn)題是找到一種將 Laravel 路由轉(zhuǎn)換為 Vue 路由的方法,以便你可以輕松地在 Vue 組件上使用它們。


第1步:首先,你必須使用Laravel路由來(lái)配置所有Vue路由 (web.php)


Route::get('{any}', function () {

  return view('layout.app');

})->where('any','.*');

第 2 步:您的布局刀片文件 (layout/app.blade.php)


<head> 

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>@yield('title', $page_title ?? '')</title>

    <meta name="csrf-token" content="{{ csrf_token() }}">

    @yield('styles')

</head>

<body>

    <div id="app">

        <main>

            @yield('content')

        </main>

    </div>

    @yield('scripts')

</body>

<script src="{{asset('./js/app.js')}}"></script>

第 3 步:您的 Vue 應(yīng)用程序文件 (./js/app.js)


require('./bootstrap');

window.Vue = require('vue')

import VueRouter from 'vue-router'

import router from './router'

Vue.use(VueRouter);

Vue.use(middleware, router)

const app = new Vue({

    el: "#app",

router: new VueRouter(router),

})


第 4 步:創(chuàng)建 Vue 路由文件并導(dǎo)入組件(route/index.js)


import Widget from "./js/components/dashboard/Widget.vue"

export default{

 mode: 'history',

 routes: [

    { path: '/dashboard/widget', name: "Widget",component: Widget, },       

 ]

}

第 5 步:使用您在第 2 步中創(chuàng)建的布局導(dǎo)航欄組件中的 Vue 路由路徑,方法如下:(./js/components/Navbar.vue)


<template>

            <nav class="navbar navbar-expand-md navbar-light shadow-none">

                <div class="container-fluid">

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">

                        <ul class="navbar-nav ml-auto" id="menubar">

                            <li class="nav-item">

                                <router-link class="nav-link" to='/dashboard/widget'>Widget</routerlink>

                            </li>

                        </ul>

                    </div>

                </div>  

            </nav>

      </template>

步驟 6創(chuàng)建小部件組件以展示您的設(shè)計(jì)。(./js/components/dashboard/Widget.vue)


<template>

    <div>

        widget design goes here...

    </div>

</template>

我希望這個(gè)答案能幫助你


查看完整回答
反對(duì) 回復(fù) 2023-06-30
  • 3 回答
  • 0 關(guān)注
  • 245 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)