Vue Router 的重定向基础和复杂用法详解指南

// 引入Vue和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// 定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
 
// 使用Vue.use注册VueRouter
Vue.use(VueRouter)
 
// 基础重定向
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' }
  ]
})
 
// 复杂重定向
const router = new VueRouter({
  routes: [
    { path: '/', redirect: { name: 'home' } },
    { path: '/home', name: 'home', component: Home },
    { path: '/about', component: About, children: [
      { path: '', redirect: 'info' },
      { path: 'info', component: () => import('./components/Info.vue') },
      { path: 'details', component: () => import('./components/Details.vue') }
    ] }
  ]
})

这个代码实例展示了如何在Vue Router中使用基础和复杂（嵌套）的重定向。基础重定向将根路径重定向到 "/home"，而复杂重定向则通过命名路由和子路由的方式进行重定向。在子路由中，空路径被重定向到 "info" 子路由。