我的SPA在Laravel 8和Vue 3上不工作
我的SPA在Laravel 8和Vue 3上不工作
提问于 2021-11-02 18:25:36
我在使用Vue 3、Vue Router 4和Laravel 8的单页面应用程序(SPA)上遇到了问题，我的问题是组件无法加载。我确保安装了vue-router，我不知道为什么代码不能运行。这些链接甚至不能点击。我已经研究这个问题3天多了，但还是没有找到解决问题的办法
这是我的代码。app.js
require('./bootstrap');
window.Vue = require('vue').default;
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);
Vue.component('home', require('./components/Home.vue').default);
Vue.component('about', require('./components/About.vue').default);
Vue.component('contact', require('./components/Contact.vue').default);
const app = new Vue({
el: '#app',
router: new VueRouter(routes)
});routes.js
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';
export default{
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]
}contact.vue
<template>
<h1>This is the contact us page.</h1>
</template>
<script>
export default {
}
</script>about.vue
<template>
<h1 class="big">This is the about us page.</h1>
</template>
<script>
export default {
}
</script>home.vue
<template>
<h1 class="big">This is the home page.</h1>
</template>
<script>
export default {
}
</script>app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
@yield('content')
</div>
</html>welcome.blade.php
@extends('layouts.app')
@section('content')
<router-link class="text-center" to='/'>Home</router-link>
<router-link class="" to='/about'>About</router-link>
<router-link class="" to='/contact'>Contact</router-link>
<router-view></router-view>
@endsectionweb.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/{any}', function(){
return view('welcome');
})->where('any', '.*');
回答 1
Stack Overflow用户
发布于 2021-11-02 18:55:50
我删除了让你感到困惑的额外的div。
@extends('layouts.app')
@section('content')
<div id="app">
<router-link class="text-center" to='/'>Home</router-link>
<router-link class="" to='/about'>About</router-link>
<router-link class="" to='/contact'>Contact</router-link>
<router-view></router-view>
</div>
@endsection页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69815279
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号