const routes = [
{
path: "/",
component: Home,
},
{
path: "/list",
component: List,
},
{
path: "/detail/:id",
component: Detail,
},
{
path:'/:any(.*)',
component:Nothing
}
];
404 페이지 컴포넌트도 따로 만들었습니다.
그런데 이렇게 작성하면 /detail/ 뒤에 문자 혹은 0,1,2 가 아닌 다른 이외 숫자 같은게 들어가면 Nothing 컴포넌트가 나와야하는데 빈 화면이 나옵니다.
콘솔에 에러메세지는 이렇게 뜨구요
main.js:9 [Vue warn]: Unhandled error during execution of render function at <Detail 블로그글=(3) [{…}, {…}, {…}]
onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView 블로그글=(3) [{…}, {…}, {…}]
> at <App>
main.js:9 [Vue warn]: Unhandled error during execution of component update at <RouterView 블로그글=(3) [{…}, {…}, {…}]
> at <App>
Detail.vue:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'title') at Proxy._sfc_render (Detail.vue:6:86)
const routes = [
{
path: "/",
component: Home,
},
{
path: "/list",
component: List,
},
{
path: "/detail/:id(\\d+)",
component: Detail,
},
{
path:'/:any(.*)',
component:Nothing
}
];
그래서 강의에서 나온데로 :id 뒤에 (\\d+) 라는 정규식을 써봤는데요. 이렇게 하니까 문자는 404페이지로 잘 가는데,
여전히 /detail/54342 이런식으로 0 1 2 제외한 아무숫자나 넣으면 404페이지로 안가고 빈 화면이 나오네요..
이런건 어떻게 해결해야할까요?
