반응형 Router5 vue router 이동 // 리터럴 문자열 경로router.push('/users/eduardo')// 경로가 있는 개체router.push({ path: '/users/eduardo' })// 이름을 가지는 라우트router.push({ name: 'user', params: { username: 'eduardo' } })// 쿼리와 함께 사용, 결과적으로 /register?plan=private가 됩니다.router.push({ path: '/register', query: { plan: 'private' } })// 해시와 함께 사용, 결과적으로 /about#team가 됩니다.router.push({ path: '/about', hash: '#team' }) 2024. 8. 3. Vue Router - Route, Router 차이 $router - Router인스턴스 - 전체에서 딱 하나만 존재함 - 전반적인 라우터 기능을 한다. - router-link요소 없이 페이지 이동 property, method 설명 app 라우터를 사용하는 router vue인스턴스 mode 라우터모드 currentRoute 현재 라우트에 대한 Route 객체 push(location) 페이지 이동 실행 (히스토리 새 엔트리에 추가됨) replace(location) 페이지 이동 실행(히스토리에 쌓이지 않음) go(n) 히스토리에서 n단계 이동 back() 히스토리에서 한 단계 돌아감 forward() 히스토리에서 한 단계 앞으로감 addRoute(routes) 라우터에서 동적으로 라우트 추가 $ Route - Route객체는 현재 활성화 된 라우트의.. 2023. 1. 5. Vue Router(1) 라우터란? (Router) vue에서 말하는 라우터는 URL에 따라 어떤 페이지를 보여줄지 매핑을 해주는 라이브러리이다. 설치 npm install vue-router 정의 [라우터/ router] 경로: src/router/index.js 해당 경로에 라우터 객체를 생성한다. [라우트/ route] 각 라우트들은 URL에 대한 컴포넌트를 매핑해줄 정보를 정의한다. 사용방법 1. routes 정의하기 각 route에 대한 매핑정보를 정의하고 routes 배열을 생성한다. // src/router/index.js import HomeView from '@/views/HomeView.vue'; import AboutView from '@/views/AboutView.vue'; const routes = [ .. 2023. 1. 2. Vue Router [뷰 라우터란] - 페이지간 이동을 위한 라이브러리 - 페이지 이동 시 url변경, 변경된 요소의 영역 컴포넌트를 갱신한다. router 설치 - vue3부터는 vue-router가 아닌 vue-router@next를 설치한다. npm install vue-router@next 폴더 / 모듈 생성 src / router 폴더를 생성하고 폴더 안에 index.js로 라우터 모듈을 생성한다. [폴더 구조] ├── router │ └── index.js ├── App.vue └── main.js [router/ index.js 모듈] import { createRouter, createWebHistory } from "vue-router"; import Home from "../views/Home.vue"; .. 2022. 12. 26. 이전 1 2 다음 728x90 반응형