IT이야기

vue-redirected redirected to default path 문제

cyworld 2022. 4. 12. 00:21
반응형

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

반응형