vue-properties가 제대로 라우팅되지 않음, 구성 요소가 표시되지 않음
사용하려고 한다.vue-router다른 경로에 대해 다른 구성요소를 표시한다.그러나 그것은 효과가 없는 것 같다.
나는 여기에 편찬된 프로그램의 코데펜을 가지고 있다.
나의main.js라우터를 정의하고 vue 애플리케이션을 시작하는 것뿐입니다.부품을 수입하고 경로를 설정하는 겁니다.
import scss from './stylesheets/app.styl';
import Vue from 'vue';
import VueRouter from 'vue-router';
import Resource from 'vue-resource';
import App from './components/app.vue';
import Home from './components/home.vue';
import Key from './components/key.vue';
import Show from './components/show.vue';
// Install plugins
Vue.use(VueRouter);
Vue.use(Resource);
// Set up a new router
var router = new VueRouter({
mode: 'history',
routes:[
{ path: '/home', name: 'Home', component: Home },
{ path: '/key', name: 'Key', component: Key },
{ path: '/show', name: 'Show', component: Show },
// catch all redirect
{ path: '*', redirect: '/home' }
]
});
// For every new route scroll to the top of the page
router.beforeEach(function () {
window.scrollTo(0, 0);
});
var app = new Vue({
router,
render: (h) => h(App)
}).$mount('#app');
내 app.vue는 정말 간단하다. 단지 포장지 div와 the wrapper div와router-view
<script>
export default {
name: "app"
}
</script>
<template lang="pug">
.app-container
router-view
</template>
라우터가 보여야 하는 다른 세 가지 요소들은 똑같이 단순하고, 각각은 기본적으로 똑같아 보인다.Just thename그리고h1내용이 다르다.
<script>
export default {
name: "home"
}
</script>
<template lang="pug">
h1 Home
</template>
웹 팩은 모든 것을 하나로 만든다.app.js한치의 오차 없이나는 아주 간단한 것을 가지고 있다.index.html내가 크롬으로 열어본 파일.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sagely Sign</title>
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
</body>
</html>
콘솔을 보니 오류가 없다.URL이 그대로 유지되고 라우터가 리디렉션되지 않는 것 같음/home.
file:///Users/username/Development/test-app/build/index.html
새 노선으로 바뀔 줄 알았을 텐데.
file:///Users/username/Development/test-app/build/index.html#/!/home
하지만 내가 직접 그 길로 간다고 해도home.vue구성 요소가 표시되지 않음.
에서 사용하고 있는 기능beforeEach방법은 항법 가드다.내비게이션 가드에는 다음 3가지 매개 변수가 수신됨:to,from그리고next. 내비게이션 가드 문서에서:
항상 다음 기능을 호출하십시오. 그렇지 않으면 후크가 해결되지 않을 수 있습니다.
여기서 페이지 맨 위에서 스크롤만 하면 후크가 해결되지 않으므로, 라우터는 스크롤 직후에 여기서 중지된다.
기능을 다음과 같이 쓰십시오.
router.beforeEach(function (to, from, next) {
window.scrollTo(0, 0);
next();
});
그리고 그것은 효과가 있을 것이다.
참조URL: https://stackoverflow.com/questions/40683353/vue-router-not-routing-properly-no-components-are-shown
'Programing' 카테고리의 다른 글
| RxJS를 사용하여 "사용자가 타이핑 중" 표시기를 표시하는 방법? (0) | 2022.03.31 |
|---|---|
| 중첩된 개체를 업데이트할 때 상태 다시 렌더링하지 않음 (0) | 2022.03.31 |
| 오류: 'vue-loader-v16/패키지' 모듈을 찾을 수 없음json's (0) | 2022.03.30 |
| 범위 슬롯을 통해 하위 구성 요소로 양식 입력 요소를 전달하는 방법 (0) | 2022.03.30 |
| 이름이 'na......'인 경로는 존재하지 않는다.$router.push() 잘못된 경로 Vue Js로 이동 (0) | 2022.03.30 |