重定向路由

• 在路由规则数组中，可采用 redirect 来重定向到另一个地址：
  • 通常是将 / 重定向到 某个页面；
• 示例展示：
  • router/index.js：

    import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'// TODO 创建路由规则数组
    const routes = [{path: '/',// 路由重定向redirect: '/home'},{path: '/home',name: 'home',component: () => import('@/views/HomeVue.vue')},{path: '/blog',name: 'blog',component: () => import('@/views/BlogHomeVue.vue')}
    ]// TODO 创建路由
    const router = createRouter({// TODO 规定路由模式// history: createWebHashHistory(),history: createWebHistory(),routes
    })export default router
    

  • App.vue：

    <script setup>
    import { ref, reactive, computed, onMounted } from 'vue'onMounted(() => {});
    </script><template>
    <!-- 路由链接，点击是路由地址会切换到属性 to 的地方 --><router-link to="/">路由重定向 到 首页</router-link> | <router-link to="/home">首页</router-link> | <router-link to="/blog">博客</router-link><hr><!-- 路由试图，路由切换组件展示的地方，路由出口 --><router-view />
    </template>
    

• 运行效果展示：