반응형
클라이언트 없이 vuejs2 및 vue-router가 작동하도록 할 수 없음
내 페이지에 vuejs와 vue 라우터를 포함하며,app.js라우터 및 vue를 초기화하지만 라우팅이 작동하지 않는 경우, 내부에서 정의된 링크가<router-link to="/foo"> foo </router-link>
이것은 코드의 단순화된 버전이다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../build/js/vue.min.js"></script>
<script src="../build/js/vue-router.min.js"></script>
<script src="../build/js/app.js"></script>
</head>
<body id="app">
<div class='nav'>
<router-link to="/foo">foo</router-link>
<router-link to="/bar">bar</router-link>
<router-link to="/tar">tar</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</body>
</html>
나의app.js이 vue-properties 페이지 또는 이 예에서 복사/복사된 경우:
// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter and then call `Vue.use(VueRouter)`.
// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes // short for `routes: routes`
})
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
router: router
}).$mount('#app')
왠지 링크가 하나도 안 보여콘솔에서 오류가 보이지 않는다.모든 파일이 페이지에 적절하게 포함되었다.
당신의 Vue 스크립트에 포함된 것은 머리 부분이 아니라 닫히는 신체 태그 바로 앞에 와야 한다.
<body>
<div id="app">
<!-- Your Vue Components Here -->
</div>
<!-- Vue Scripts Here -->
<script src="../build/js/vue.min.js"></script>
<script src="../build/js/vue-router.min.js"></script>
<script src="../build/js/app.js"></script>
</body>
앱 아이디가 div 태그에 들어가야 할 것 같은데, 스크립트 링크를 확인해봐.
코데펜을 써봤는데 네가 보고 싶다면 효과가 있었어.
<div id="app">
<div class='nav'>
<router-link to="/foo">foo</router-link>
<router-link to="/bar">bar</router-link>
<router-link to="/tar">tar</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
반응형
'IT이야기' 카테고리의 다른 글
| 클래스 기반 접근방식과 비교하여 Hooks로 상태를 설정한 후 재렌더링할 때 어떤 차이가 있는가? (0) | 2022.04.02 |
|---|---|
| Firebase Analytics에 의해 추적되지 않는 Vue 라우터 경로 (0) | 2022.04.02 |
| Vue.js - 속성을 통해 구성 요소에 대해 여러 값(어레이)을 설정하는 방법 (0) | 2022.04.02 |
| Vuex + vue-roouter에서 중앙 집중화된 상태로 분리된 구성 요소 (0) | 2022.04.01 |
| 해저 플롯이 표시되지 않음 (0) | 2022.04.01 |