반응형
vue-redirected redirected to default path 문제
사용자가 루트 경로로 이동할 때(사용자가 myapp.com으로 이동할 때 myapp.com/defaultpage으로 리디렉션할 때) 특정 페이지로 기본 설정
나의 현재 코드는
인덱스 js
import Full from '../containers/Full'
import DefaultView from '../views/DefaultView'
export default new Router({
mode: 'history',
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/',
redirect: '/defaultview',
name: 'home',
component: Full,
children: [
{
path: '/defaultview',
name: 'defaultview',
component: DefaultView
},
{
path: '*',
component: NotFoundComponent
}
}
]})
사용자가 myapp.com을 방문할 때 '404 페이지 없음' 즉, NotFoundComponent를 받는다.myapp.com/defaultview을 입력해야 정확한 페이지로 갈 수 있다.
좋은 생각 있어?
다음 코드 사용:
routes: [
{
path: '/',
redirect: '/defaultview'
},
{
path: '/defaultview',
name: 'defaultview',
component: DefaultView
},
{
path: '*',
component: NotFoundComponent
}
]
자식 사용 시 부모 URL 접두사 제거
ex: 변경"/defaultview"
로defaultview
상위 경로 구성요소를 제거하여 실제 코드는 다음과 같아야 함
routes: [
{
path: '/',
redirect: '/defaultview',
name: 'home',
component: Full,
children: [
{
path: 'defaultview', /* changed */
name: 'defaultview',
component: DefaultView
},
{
path: '*',
component: NotFoundComponent
}
]
}
참조 중첩 경로
이 방법은 나에게 효과가 있다.
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '../components/home/container';
import LiveAgent from '../components/live_agent/container';
import Bot from '../components/bot/container';
import User from '../components/user/container';
const routes = [
{
path: '/',
redirect: '/home'
},
{
component: Home,
name: 'home',
path: '/home'
},
{
component: LiveAgent,
name: 'live_agent',
path: '/live_agent'
},
{
component: Bot,
name: 'bot',
path: '/bot'
},
{
component: User,
name: 'user',
path: '/user'
}
];
export default new VueRouter({
routes // short for routes: routes
})
코드 1줄로 할 수 있다, 즉, 추가해서 할 수 있다.router.replace("myPath");
. 전체 코드:
import Vue from "vue";
import Router from "vue-router";
import MyComponent from "./my-component";
Vue.use(Router);
const routes = [
{ path: "/myPath", name: "myPath", component: MyComponent }
];
const router = new Router({
mode: "history", // Remove the hash from the URL, optional.
routes
});
router.replace("myPath");
export default router;
참조URL: https://stackoverflow.com/questions/44060414/vue-router-redirect-to-default-path-issue
반응형
'IT이야기' 카테고리의 다른 글
VueJS 앱이 비어 있음 (0) | 2022.04.12 |
---|---|
Vue에서 입력 정리 방법.Js (0) | 2022.04.12 |
Vue.use()가 "정의되지 않은 속성 '사용'을 읽을 수 없음"을 던지는 경우 (0) | 2022.04.12 |
Vue.js의 조건부는 프로펠러 값에 따라 달라지는가? (0) | 2022.04.11 |
Laravel/Vue.js 프로젝트에서 Vuesax 업로드 구성 요소를 사용하는 방법 (0) | 2022.04.11 |