Vue Router 之 Redirect

栏目: 编程语言 · 发布时间: 6年前

内容简介:若希望在 Browser 輸入特定 Route 之後,卻自動轉址到其他網址,則要使用 Redirect。Vue 2.6.10Vue-router 3.0.3

若希望在 Browser 輸入特定 Route 之後,卻自動轉址到其他網址,則要使用 Redirect。

Version

Vue 2.6.10

Vue-router 3.0.3

Vue CLI 3.8.4

Redirect

Vue Router 之 Redirect

雖然是輸入 /about-us ,但會自動轉到 /about

By String

router.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/about-us',
      name: 'about-us',
      redirect: '/about'
    }
  ]
})

19 行

{
  path: '/about-us',
  name: 'about-us',
  redirect: '/about'
}

在 route object 加上 redirect property,使用 string 指定要轉址的網址。

By Named Route

{
  path: '/about-us',
  name: 'about-us',
  redirect: { name: 'about' }
}

Redirect 也可以搭配 named route,將 object 指定給 redirect property,並將 route 名稱指定給 name property。

By Function

{
  path: '/about-us',
  name: 'about-us',
  redirect: () => '/about',
}

Redirect 還可搭配 function,適合更複雜的邏輯。

Conclusion

  • Vue Router 提供了 string、named route 與 function 三種 redirect 方式,尤其是 function,除了適合更複雜的邏輯外,甚至可以使用 higher order function 與 closure 產生 redirect

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

你必须知道的213个C语言问题

你必须知道的213个C语言问题

范立锋、李世欣 / 人民邮电出版社 / 2010-6 / 45.00元

《你必须知道的213个C语言问题》精选了213个在C语言程序设计中经常遇到的问题,目的是帮助读者解决在C语言学习和开发中遇到的实际困难,提高读者学习和开发的效率。这些问题涵盖了C语言与软件开发、C语言基础、编译预处理、字符串、函数、键盘操作、文件、目录和磁盘、数组、指针和结构、DOS服务和BIOS服务、日期和时间、重定向I/O和进程命令、C语言开发常见错误及程序调试等内容,均是作者经过充分的调研,......一起来看看 《你必须知道的213个C语言问题》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具