在在nuxt中使用路由重定向的实例中使用路由重定向的实例
我们都知道，在写SPA的时候，我们可以通过配置vue-router来实现路由的重定向。
官方文档（以及ts类型）的定义中给出了这一选项：
interface RouteConfig = {
path: string,
redirect?: string | Location | Function,
}
也就是说，我们可以定义这样一个路由：
{
path: "/foo",
redirect: "/foo/bar",
}
这样，我们在访问/foo的时候，就会被重定向到/foo/bar。这些都是老生常谈了。
然而，到了SSR的环境下，如果使用nuxt，因为nuxt采用了约定大于配置的方式，pages目录代替了路由，虽然简化了配置，
但是给一些需要定制化的场景的手动配置带来了一些麻烦，并且nuxt官方也不建议手动配置router，如果实在需要配置，可以
在nuxt.config.js里进行一些中间件配置，但是这个对于重定向这种特别简单的事情来说，未免有杀鸡用牛刀之嫌。
所以，我一开始想的办法是，在pages目录下，需要重定向的路由组件里，增加一个beforeCreate()钩子：
<template>
<div></div>
</template>
<script>
export default {
beforeCreate() {
this.$router.replace('/path/to')
}
}
</script>
相当于在组件创建之前进行一个路由的替换，这个组件作为路由的占位。之所以不用push而是用replace，因为replace更接近
重定向的效果，我们总不希望用户还能回退（比如浏览器的后退键）到重定向之前的页面里去吧。
但是这个方案有一个问题，就是在路由“重定向”的过程中，界面会发生轻微的闪烁，这样体验就很不好了。所以，肯定需要其
他的解决方案。
至于为什么会闪屏，因为虽然beforeCreate钩子理论上会先于模板编译执行，但是这是在SFC环境下，模板编译会提前执行；
如果是用script标签引入的Vue就不会有这个问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.1.6/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view/>
</div>
<script>
const Foo = {template: '<div>foo</div>'};
const Bar = {template: '<div>bar</div>'};
const routes = [
{path: '/foo', component: Foo, redirect: '/bar'},
{path: '/bar', component: Bar}
];
const router = new VueRouter({routes});
- 1
- 2
前往页