Laravel/Vue SSR模式下如何在<script>中使用route()函数

在服务端渲染（SSR）运行时，route()函数仅能在<template>中正常使用，在<script>中调用会触发route is not defined的错误。以下是问题重现及解决方案：

错误重现步骤 #

1. 环境搭建

• 安装新Laravel项目：

composer create-project laravel/laravel ssrtest

• 进入项目目录：

cd ssrtest

• 引入laravel/breeze开发包：

composer require laravel/breeze --dev

• 安装带SSR的Vue版本Breeze：

php artisan breeze:install vue --ssr

2. 启动服务

• 启动Laravel服务：

php artisan serve

• 打开新终端，启动Node SSR命令：

php artisan inertia:start-ssr

此时SSR模式正常运行，可通过resources/js/Pages/Welcome.vue中Link组件的route('login')跳转至登录页面。

3. 触发错误

1. 停止SSR Node服务：终端按Ctrl+C
2. 在Welcome.vue的<script>部分添加代码：

const testLink = route("login");

3. 重新构建并启动SSR：

npm run build && php artisan inertia:start-ssr

4. 刷新浏览器页面，终端会出现以下错误：

[Vue warn]: Unhandled error during execution of setup function ...

ReferenceError: route is not defined

解决方案 #

方案一：直接导入route函数（推荐）

在组件的<script setup>或<script>中，从@inertiajs/vue3直接导入route函数，即可在SSR环境下正常调用：

<script setup>
import { route } from '@inertiajs/vue3';

const testLink = route('login');
// 后续可正常使用testLink变量
</script>

方案二：全局注册route函数

如果需要在所有组件中无需导入直接使用route，可在客户端和SSR的入口文件中把route注册为Vue全局方法：

1. 修改resources/js/app.js：

import { createApp, h } from 'vue';
import { createInertiaApp, route } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

createInertiaApp({
    title: (title) => `${title} - ${import.meta.env.VITE_APP_NAME}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mixin({ methods: { route } }) // 注册为全局方法
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

2. 修改resources/js/ssr.js：

import { createSSRApp, h } from 'vue';
import { createInertiaSSR, route } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

export default function render(page) {
    return createInertiaSSR({
        page,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
        setup({ app, props, plugin }) {
            return createSSRApp({ render: () => h(app, props) })
                .use(plugin)
                .use(ZiggyVue)
                .mixin({ methods: { route } }); // 注册为全局方法
        },
    });
}

修改完成后重新构建并启动SSR服务：

npm run build && php artisan inertia:start-ssr

在<script setup>中可通过getCurrentInstance().appContext.config.globalProperties.route()调用，或在选项式API的组件中直接使用this.route()。

内容的提问来源于stack exchange，提问作者Erik-Jan