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