vue-link : 라우터 링크가 작동하지 않음
부에루터를 쓰려고 하는데router-link링크를 클릭하면 URL이 올바르게 업데이트되지만 에 로드된 것은 없음<router-view></router-view>내 생각엔 이게 Vue-CLI로 만들기 보다는 unpkg CDN을 사용하는 것과 관련이 있는 것 같아.나는 왜 이것이 작동하지 않는지 잘 모르겠다.
인덱스.포인트
....
<body>
....
<nav id="app">
<li><router-link to="/hello">Hello</router-link></li>
<nav>
<!--view-->
<router-view></router-view>
....
<!--vue.js-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!--router-->
<script src="js/router.js"></script>
</body>
라우터.js
const Hello = { template: '<div>test</div>' }
const routes = [
{ path: '/hello', component: Hello }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
나는 그것을 제거하려고 노력했다.<li> </li>근처에router-link그러나 이것은 도움이 되지 않는 것 같다.
사용 중인 경우const app = new Vue({}), 이렇게 하면 새 vue 인스턴스가 생성됨
그러면 당신은 사용하고 있다.$mount()요소 선택기를 논쟁으로 삼을 수 있다.
무엇$mount()인수로 전달되는 관련 DOM 요소에 수동으로 vue 인스턴스를 마운트하는 경우
당신의 코드에서 오직nav원소의 id가 있다app그 의미는 오직nav요소가 vue 인스턴스에 마운트되어 있지 않고router-view의 밖에 있는nav원소의
그래서 당신의 답은 id가 있는 포장지를 추가하는 것이다.app일한다, 왜냐하면 이제router-view또한 vue 인스턴스와 연관되어 있다.
다음을 참조할 수 있다.
그것은 내가 첨부할 때 효과가 있다.app포장지에 id를 붙이다.<div>이렇게 모든 것을 둘러싸고:
....
<div id="app">
<nav>
<li><router-link to="/hello">Hello</router-link></li>
<nav>
</div>
내 경우 외부 사이드바가 있기 때문에 라우터 링크가 작동하지 않음
그래서 이야기의 교훈은 우리가 탑재하기 위해 사용했던 모든 부에 관련된 요소나 물건들을 디브에 넣어야 한다는 것이다.
따라서 html의 구조는 다음과 같아야 한다.
<html>
<body>
<div id="app">
<aside>
<!-- sidebar -->
<li><router-link to="/users">Users</router-link></li>
<li><router-link to="/home">Home</router-link></li>
</aside>
<div class="content">
<!-- Main content -->
<event-hub></event-hub>
<router-view></router-view>
</div>
</div>
</body>
</html>
참조URL: https://stackoverflow.com/questions/44793751/vue-router-router-link-not-working
'programing' 카테고리의 다른 글
| html 테이블 열 끌어서 놓기 방법 (0) | 2022.05.25 |
|---|---|
| vue2-google-maps에서 점 주위에 원 그리기 (0) | 2022.05.25 |
| Vue.js: v-On:event 또는 @event에 매개 변수가 포함된 익명 함수 (0) | 2022.05.25 |
| 전체 vuejs 구성 요소를 클릭하는 방법 (0) | 2022.05.25 |
| 자바에서 C++ Pair에 해당하는 것은? (0) | 2022.05.25 |