반응형
Vue-Router가 단일 페이지 애플리케이션에서 재라우팅되지 않음(Vue/Laravel)
나는 얻으려고 노력하고 있다.vue-routerA에서 일하다Vue.js/Laravel투영하다다음과 같은 간단한 페이지가 있다.
홈 페이지:
페이지 정보(한 페이지로 스크롤됨):
다음 파일로 제작:
환영하다블레이드.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=WeakMap"></script>
<title>title</title>
</head>
<body id="body">
<div id="app">
<app></app>
</div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
</html>
app.vue:
<template>
<div class="container">
<main>
<home></home>
<about></about>
</main>
</div>
</template>
<script>
import About from "./about"
import Home from "./home";
export default {
name: "app",
components: {
About,
Home,
}
}
</script>
<style lang="scss">
</style>
home.vue:
<template>
<section class="home" style="background-color: yellow; height: 100vh">
<h1>Home Page</h1>
</section>
</template>
<script>
export default {
name: "home"
}
</script>
<style scoped lang="scss">
</style>
about.vue:
<template>
<section class="about" style="background-color: green; height: 100vh">
<h2>About Page</h2>
</section>
</template>
<script>
export default {
name: "about"
}
</script>
<style scoped lang="scss">
</style>
web.php:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
app.js:
require('./bootstrap')
import Vue from "vue"
import App from "../vue/app"
import router from "./router";
const app = new Vue({
el: "#app",
components: { App },
router
})
라우터.js:
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../vue/home";
import About from "../vue/about";
Vue.use(VueRouter);
export default new VueRouter({
mode: "history",
routes: [
{ path: "/", component: Home},
{ path: "/about", component: About}
]
});
자, 덧붙이자면 <router-view></router-view>로app.vue다음과 같은 경우:
<template>
<div class="container">
<main>
<home></home>
<about></about>
</main>
</div>
<router-view></router-view>
</template>
사이트가 전혀 로드되지 않고 브라우저 콘솔에 오류 없음:
경로localhost:3000/about…을 보이다.404 Error:
내가 뭘 잘못하고 있는 거지?
라우터에 base를 정의하시겠습니까?
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;
그런 다음 앱에서:
<template>
<div class="container">
<nav>
<router-link
to="/"
tag="a"
>Home</router-link>
<router-link
to="/about"
tag="a"
>About</router-link>
</nav>
</div>
<router-view></router-view>
</template>
Laravel에서는 모든 경로를 Vue 프로젝트로 리디렉션할 수 있는 모든 경로가 필요하다.
다음과 같은 컨트롤러를 새로 생성하십시오.)VueController라라벨에 있는 모든 경로를 안내하십시오.
Route::get('/{any}', 'VueController@index')->where('any', '.*');
그럼 네 안에서VueController답례하다welcome블레이드:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class VueController extends Controller
{
public function index()
{
return view('welcome');
}
}
반응형
'IT이야기' 카테고리의 다른 글
| Vue.js는 라우터 뷰를 통해 전달된 데이터를 브라우저의 devtools에서 볼 수 있어야 하는가? (0) | 2022.03.11 |
|---|---|
| 스위치맵 운영자가 약속과 함께 사용할 때 마지막 값만 내보내는 이유는? (0) | 2022.03.10 |
| 반응성 항법 실험 예시? (0) | 2022.03.10 |
| react-Router v4에서 react IndexRoute 사용 (0) | 2022.03.10 |
| SecionList를 사용하여 섹션을 확장하거나 축소하는 방법 (0) | 2022.03.10 |