Laravel项目中Vue的<router-link>显示为普通文本无法正常跳转是什么原因？

核心错误点 #

你创建了vue-router实例后，没有将其挂载到Vue应用实例上，导致Vue无法识别<router-link>、<router-view>这类路由内置全局组件，因此这类标签会被当做未知自定义标签处理，直接显示为纯文本。

次要优化点 #

createWebHistory的入参为路由基础路径，若你的项目未部署在域名二级目录下，直接传入/即可，避免process.env.APP_URL取值异常导致路由路径匹配错误。

修复后的app.js代码 #

import bootstrap from 'bootstrap';

import {createApp} from "vue";
import { createRouter, createWebHistory } from 'vue-router'
import Login from './components/auth/Login.vue'
import Register from "./components/auth/Register";

window.$ = require( "jquery" );

const routes = [
    {
        path: '/',
        name: 'Login',
        component: Login
    },
    {
        path: '/register',
        name: 'Register',
        component: Register
    }
]

const router = createRouter({
    history: createWebHistory('/'),
    routes
})

const app = createApp({});
// 挂载路由实例到Vue应用，必须在mount之前执行
app.use(router)
app.mount('#app');
export default router

验证操作 #

修改完成后重新执行npm run dev编译前端资源，刷新页面即可看到<router-link>正常渲染为可点击的跳转链接。

内容的提问来源于stack exchange，提问作者Ruben Kubalyan