В процессе работы приложения может сложиться ситуация, что какой-то ресурс будет перемещен с одного адреса на другой. В этом случае возникает необходимость установить переадресацию с одного адреса на другой.
Для выполнения переадресации у маршрута применяется параметр redirect, который задает путь для редиректа:
{ path: '/a', redirect: '/b' } // переадресация с адреса "/a" на адрес "/b"
{ path: '/a', redirect: { name: 'home' } } // переадресация с адреса "/a" на адрес, который используется маршрутом "home"
Например, определим маршрут, на который будут переадресованы пользователи при попытке обращения к несуществующим адресам:
<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
const NotFound = { template: '<h2>Страница не найдена</h2>' }
const Home = { template: '<h2>Home Page</h2><p>Home Page Content</p>' }
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/home', redirect: '/' },
{ path: '/index', redirect: { name: 'home' } },
{ path: '/:pathMatch(.*)*', component: NotFound },
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes,
});
const app = Vue.createApp({});
app.use(router);
app.mount('#app');
</script>
</body>
</html>
Здесь компонент Home обрабатывает запросы по пути "/". Если запрошен адрес "/home", то происходит переадресация по пути "/". Если запрошен путь, происходит перенаправление на маршруту "home" - то есть по сути опять же по пути "/", который обслуживается компонентом Home.
При этом при переадресации можно передавать параметры:
<div id="app">
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
const NotFound = { template: '<h2>Страница не найдена</h2>' }
const Home = { template: '<h2>Главная</h2>' }
const Product = { template: '<h2>Товар {{$route.params.id}}</h2>' }
const routes = [
{ path: '/', component: Home },
{ path: '/product/:id', redirect:'/ru/product/:id' },
{ path: '/ru/product/:id', component: Product },
{ path: '/:pathMatch(.*)*', component: NotFound },
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes,
});
const app = Vue.createApp({});
app.use(router);
app.mount('#app');
</script>
Здесь определена переадресация с адреса "/product/:id" на адрес "/ru/product/:id". При этом значение параметра id автоматически будет передаваться с первого маршрута второму.
Иногда возникает ситуация, когда надо динамически решить, куда выполнять переадресацию. В этом случае можно задать функцию, которая динамически определяет, куда переадресовывать пользователя:
<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
const NotFound = { template: '<h2>Страница не найдена</h2>' }
const Home = { template: '<h2>Главная</h2>' }
const Product = { template: '<h2>Товар {{$route.params.id}}</h2>' }
const routes = [
{ path: '/', component: Home },
{ path: '/product/:id', redirect: to => {
if (to.params.id > 10) {
return '/404'
} else {
return {name: 'product'}
}
}
},
{ path: '/ru/product/:id', component: Product, name:'product' },
{ path: '/404', component: NotFound },
{ path: '/:pathMatch(.*)*', redirect: "/404" }
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes,
});
const app = Vue.createApp({});
app.use(router);
app.mount('#app');
</script>
</body>
</html>
В данном случае в зависимости от значения параметра маршрута id, который можно получить через выражения to.params.id, вычисляется, на какой маршрут перенаправить пользователя. Причем опять же мы можем выполнить переадресацию либо по пути, либо по маршруту по имени:
{ path: '/product/:id', redirect: to => {
if (to.params.id > 10) {
return '/404'
} else {
return {name: 'product'}
}
}
},
В данном случае если id больше 10, идет переадресация о пути "/404" - по сути на компонент NotFound, а если id меньше 10, то идет переадресация на маршрут с именем "product", то есть по сути на компонент Product.