반응형
Vue 경로에서 여러 구성 요소를 사용하는 방법
나는 방금 Vue로 시작해서 한 경로에 두 가지 구성 요소 즉, 내비게이션 바와 몇 가지 판매 데이터를 사용하려고 한다.라라벨 믹스는 웹팩과 자산을 번들로 묶고 있으며, npm은 계속 실패하고 있다.
인덱스.php
<body>
<div id="app">
<router-view name="nav"></router-view>
<router-view></router-view>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
app.js:
import './bootstrap';
import router from './routes';
const app = new Vue({
el: '#app',
router
});
routes.js:
import VueRouter from 'vue-router';
import Sales from './views/employer/sales/Sales.vue';
import MainNav from './components/MainNav.vue';
let routes = [
{
path: '/sales',
components: {
default: Sales,
nav: MainNav
}
}
];
export default new VueRouter({
routes,
linkActiveClass: 'is-active'
});
sales.vue
<template>
<p>This is the Sales view</p>
</template>
메인나브뷰
<template>
<p>This is the MAIN NAVIGATION</p>
</template>
npm의 오류 메시지는 특별히 계몽적인 것은 아니다.
Failed at the @ dev script 'node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
그것은 계속해서 내가 최신 노드와 npm을 실행하고 있는지 확인해야 한다고 제안한다.
내가 뭘 잘못하고 있는 거지?신기하게도, 이런 식으로 내비게이션 구성 요소를 포함하려고 하기 전에, 나는 그것을 글로벌 구성 요소로 등록하고 있었다.등록은 괜찮은 것 같았지만, 요소 태그를 템플릿에 포함할 때마다 npm은 위와 같은 방식으로 실패하곤 했다.
왠지 노드가 혼란스러워진 것 같아.node_modules 디렉토리를 제거하여 재설치하였고 모든 것이 양호하였다.
참조URL: https://stackoverflow.com/questions/43109077/how-to-use-multiple-components-on-a-vue-route
반응형
'Programing' 카테고리의 다른 글
| 반응 환경에서 알 수 없는 모듈 "crypto" 필요 (0) | 2022.03.22 |
|---|---|
| 초기 v-선택 값 설정 (0) | 2022.03.22 |
| 세 개 이상의 React 애플리케이션 간에 데이터를 공유하는 방법 (0) | 2022.03.21 |
| TypeScript 및 webpack으로 웹 작업자를 만드는 방법 (0) | 2022.03.21 |
| MD 크기의 장치에 대해서만 요소 표시 (0) | 2022.03.21 |