Vue路由重定向

一、Vue路由重定向方法

Vue路由提供了幾種方法進行重定向:

• 使用redirect重定向
• 使用next函數重定向

下面是使用redirect進行重定向的代碼示例：

// 在路由配置中設置重定向
{
  path: '/home',
  redirect: '/'
}

其中，path指定被重定向的頁面路徑，redirect指定重定向的頁面路徑。

下面是使用next函數進行重定向的代碼示例：

// 在路由攔截中使用next進行重定向
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else {
    const token = localStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
})

其中，to表示目標路由對象，from表示源路由對象，next函數用於進行重定向。如果在路由攔截中使用next函數進行重定向，需要在to.path判斷後再進行next('/login')跳轉操作。

二、Vue3路由重定向

在Vue3中，路由的實現方式有了較大的變化。Vue3使用的是強大的Composition API，可以通過useRoute()和useRouter()來獲取路由和重定向。

下面是Vue3路由重定向的代碼示例：

import { useRoute, useRouter } from 'vue-router'
 
export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
 
    function redirectToLogin() {
      router.push('/login')
    }
 
    return {
      route,
      redirectToLogin
    }
  }
}

其中，useRoute()用於獲取當前路由對象，useRouter()用於獲取路由對象，可以使用push()方法進行路由跳轉。

三、Vue路由重定向配置

在Vue路由中，可以通過對象的方式進行路由重定向的配置。下面是一個簡單的代碼示例：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

其中，routes是一個數組，每個元素都是一個路由對象。可以設置path、component、redirect等路由屬性，以達到路由跳轉的目的。

四、Vue 重定向

Vue提供了this.$router.push()和this.$router.replace()方法用於進行頁面的跳轉，它們都可以實現路由重定向的效果：

// 使用push進行重定向
this.$router.push('/home')
 
// 使用replace進行重定向
this.$router.replace('/home')

其中，push方法可以通過back進行頁面回退，而replace方法不具備回退功能。

五、Vue路由redirect

在Vue中，可以使用redirect屬性對路由進行重定向，例如下面的代碼：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },
    { path: '/b', component: B }
  ]
})

如果當前路徑為/a，則會自動跳轉到/b頁面。

六、Vue 路由 path

在Vue中，可以使用path屬性指定路由的路徑，例如下面的代碼：

const router = new VueRouter({
  routes: [
    { path: '/home/:id', component: Home }
  ]
})

使用:id佔位符可以動態地獲取路由參數，例如/home/123可以獲取到參數為123。

七、Vue路由重定向攜帶參數

在Vue中，可以使用redirect:name配置項來進行路由重定向和攜帶參數的操作。

下面是使用redirect:name進行路由重定向攜帶參數的代碼示例：

const router = new VueRouter({
  routes: [
    { path: '/home/:id', component: Home },
    { path: '/user/:id', redirect: to => {
        const { id } = to.params
        return `/home/${id}`
      }
    }
  ]
})

當訪問/user/123路徑時，會將路由重定向到/home/123頁面，並攜帶參數。

八、Vue路由重定向其他地址

在Vue中，可以使用特殊的路徑進行路由重定向到其他地址，例如下面的代碼：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', redirect: 'https://www.baidu.com' }
  ]
})

當訪問任意不存在的路徑時，會自動跳轉到https://www.baidu.com頁面。

九、Vue路由重定向命令

在Vue中，可以使用this.$router.go()命令進行路由的跳轉，在傳入不同的參數時，具有不同的跳轉效果。

下面是使用this.$router.go()進行路由重定向的代碼示例：

// 跳轉到上一個歷史頁面
this.$router.go(-1)
 
// 跳轉到下一個歷史頁面
this.$router.go(1)
 
// 跳轉到任意一個歷史頁面
this.$router.go('back')

其中，-1表示跳轉到上一個歷史頁面，1表示跳轉到下一個歷史頁面，'back'表示跳轉到任意一個歷史頁面。