vue3路由重定向

简介: vue3路由重定向

 在vue3.0中设置路由重定向的方法:

    1. 新建项目 并引入vue和vue-router;
    2. 使用Vue.use注册路由;
    3. createRouter定义和配置路由;
    4. 使用redirect 属性设置路由重定向;

    路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面;

    通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向:

    import { createRouter, createWebHashHistory } from 'vue-router'
    import guide from '../views/guide.vue'
    const routes = [
      {
        path: '/',
        redirect: '/guide'
      },
      {
        path: '/guide',
        name: 'guide',
        component: guide
      },
      {
        path: '/login',
        name: 'login',
        component: () => import(/* webpackChunkName: "about" */ '../views/login.vue')
      }
    ]
    const router = createRouter({
      history: createWebHashHistory(),
      routes
    })
    export default router

    image.gif


    相关文章
    |
    6天前
    |
    JSON 数据可视化 数据库
    vue3+threejs+koa可视化项目——实现登录注册(第三步)
    vue3+threejs+koa可视化项目——实现登录注册(第三步)
    28 5
    |
    6天前
    |
    数据可视化 前端开发 JavaScript
    vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
    vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
    44 3
    |
    6天前
    |
    JavaScript 数据可视化 算法
    vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
    vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
    28 6
    |
    3天前
    |
    资源调度 JavaScript 前端开发
    【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
    【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
    |
    3天前
    |
    JavaScript
    Vue3中props的原理与使用
    Vue3中props的原理与使用
    |
    3天前
    |
    JavaScript 前端开发 IDE
    |
    3天前
    |
    JavaScript Go
    Vue路由跳转及路由传参
    Vue路由跳转及路由传参
    |
    4天前
    |
    缓存 JavaScript 前端开发
    Vue2与Vue3:深度剖析核心差异与升级亮点
    随着Vue.js框架的不断演进,Vue2与Vue3作为两个重要版本,各自承载了特定时期的前端开发理念和技术实践。本文将全面探讨Vue2与Vue3之间的核心区别,旨在帮助开发者理解两者在设计思路、性能优化、API结构、生命周期管理等方面的显著差异,以便更好地选择和迁移至适合项目的框架版本。
    19 2
    |
    4天前
    |
    JavaScript 前端开发 API
    Vue 3的响应式系统相比Vue 2有哪些改进?
    Vue 3 响应式系统升级亮点:使用 Proxy 替换 `Object.defineProperty`,实现更细粒度的变更跟踪与高性能;自动追踪嵌套属性,无需 `$set` 或深度监听;支持懒响应式,提升初始化性能;改进数组响应式,直接使用原生数组方法;递归侦听器增强灵活性;静态属性追踪;自定义响应式容器;统一 `ref` 和 `reactive` API;引入 `toRefs` 函数;优化响应式 API,如 `markRaw`, `shallowRef` 等,大幅提升效率和开发体验。
    |
    4天前
    |
    JavaScript 算法 前端开发
    vue3和vue2得区别
    Vue 3 优化了性能,引入了更快的虚拟 DOM 算法和模块化编译,提升渲染速度并减小打包文件大小。新引入的 Composition API 提高代码组织灵活性和可维护性。Vue 3 加强了 TypeScript 支持,改进响应式系统,使用 Proxy 实现更细粒度变化跟踪。此外,包体积更小,加载速度更快。尽管与 Vue 2 存在迁移成本,官方提供迁移指南和工具以协助平滑过渡。Vue 3 旨在提供更好的开发体验和效率。