在nuxt中使用路由重定向的实例

5星 · 超过95%的资源 167 浏览量更新于2023-05-04 收藏 85KB PDF 举报

我们都知道，在写SPA的时候，我们可以通过配置vue-router来实现路由的重定向。官方文档（以及ts类型）的定义中给出了这一选项： interface RouteConfig = { path: string, redirect?: string | Location | Function, } 也就是说，我们可以定义这样一个路由： { path: /foo, redirect: /foo/bar, } 这样，我们在访问/foo的时候，就会被重定向到/foo/bar。这些都是老生常谈了。然而，到了SSR的环境下，如果使用nuxt，因为nuxt采用了约定大于配置的

在在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>

export default {

beforeCreate() {

this.$router.replace('/path/to')

}

</script>

相当于在组件创建之前进行一个路由的替换，这个组件作为路由的占位。之所以不用push而是用replace，因为replace更接近

重定向的效果，我们总不希望用户还能回退（比如浏览器的后退键）到重定向之前的页面里去吧。

但是这个方案有一个问题，就是在路由“重定向”的过程中，界面会发生轻微的闪烁，这样体验就很不好了。所以，肯定需要其

他的解决方案。

至于为什么会闪屏，因为虽然beforeCreate钩子理论上会先于模板编译执行，但是这是在SFC环境下，模板编译会提前执行；

如果是用script标签引入的Vue就不会有这个问题：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<router-view/>

</div>

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});

下载后可阅读完整内容，剩余3页未读，立即下载

身份认证购VIP最低享 7 折!

30元优惠券

weixin_38625448

粉丝: 8

在nuxt中使用路由重定向的实例

Vue在 Nuxt.js 中重定向 404 页面的方法

redirect-module:不再需要繁琐的重定向！

nuxt中使用路由守卫的方法步骤

【Nuxt.js路由重定向进阶秘籍】：动态路由与重定向的完美融合

Nuxt.js路由重定向文档编写：记录并优化你的重定向逻辑

【Nuxt.js路由重定向高级技巧】：避免重定向循环并优化性能

【Nuxt.js路由重定向模块化】：打造高效可重用的重定向组件

【Nuxt.js路由重定向】：动态参数处理及高级用法揭秘

【Nuxt.js路由重定向】：常见错误及解决方案全解析

Nuxt.js路由重定向与安全性：如何构建坚不可摧的网站导航

最新资源