vue路由动态答案

【问题标题】：Vue routing dynamicvue路由动态
【发布时间】：2020-07-02 11:37:54
【问题描述】：

我在 Laravel 中有一个带有动态路由的后台，但是，我不知道如何在 vue js 中执行此操作，即动态创建路由，以便控制器或类似的东西返回正确的视图！

【问题讨论】：

您可以尝试使用“addRoutes”方法吗？ router.vuejs.org/api/#router-addroutes
在 laravel 我有 Route :: get ('/ {slug}', 'FrontController @ resolver') -> middleware ('ttl: 60'); 并且需要类似的东西用于 vue
所以你是说你需要一个带有动态参数的路由，比如 {slug}？
是的，因为我在 vue 路由中表示上面的代码，它会将我重定向到控制器或可以告诉我要呈现哪个视图的地方

标签： vue.js vue-router

【解决方案1】：

您可以尝试 Vue Router 的动态路由匹配，为路由参数传递不同的值：https://router.vuejs.org/guide/essentials/dynamic-matching.html

【讨论】：

【解决方案2】：

给你的小例子。

Laravel 部分 你在 Laravel 中的“网络”路由

Route::get('/{any}', 'AppController')->where('any', '.*');

调用控制器内部

public function __invoke()
    {
        return view('app');
    }

在 app.blade 中

@extends('layouts.app')

@section('content')
<div id="app">
    <app/>
</div>
@endsection

Vuejs 部分：

您的路由器文件

import Login from "./views/Login";
import Home from "./views/Home";
import NotFound from "./views/NotFound";

Vue.use(VueRouter);

let router = new VueRouter({
    routes: [
        { path: '/login', name: 'login', component: Login },
        { path: "/", name: 'home', component: Home },
        { path: "*", name: '404', component: NotFound }
});

在 app.js 中

import router from './router';

const app = new Vue({
    store,
    router,
    i18n,
    el: '#app',
});

所有 post、put、patch 路由都应该是“api”路由。

【讨论】：

如果我在后台添加新路由，是否必须在 vue 的路由文件中手动添加？
在 Laravel 中，您只有一条带有 where('any', '*') 的路由 - 这适用于您的所有视图（GET 方法）但在 Vue 路由器中，您需要添加所有视图并分配唯一路径对于每个路径，Vue 路由将按路径显示所需的视图。
在 laravel 我有 Route :: get ('/ {slug}', 'FrontController @ resolver') -> middleware ('ttl: 60'); 并且需要类似的东西用于 vue