Pinia+Router学习笔记(十二)

简介: 本节记录Vue-Router的两种路由重定向方式

路由重定向有两种类型,一种是redirect,还有一种是alisa:

  1. redirect:用来将当前URL重定向到新的URL
  2. alisa:为路由起别名,不同路径跳转到的实际上是同一个组件
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Login',
        redirect: '/user',
    },
    {
        path: '/user',
        name: 'Reg',
        component: import('../components/reg.vue'),
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router
AI 代码解读

此时访问/相当俞访问/user

redire的两种写法

第一种:直接使用字符串,示例在上面
第二种:对象写法(path会自动对应到其他路由中)

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Login',
    redirect: {path:'/user'},
  },
  {
    path: '/user',
    name: 'Reg',
    component: import('../components/reg.vue'),
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router
AI 代码解读

第三种:函数写法(支持传入一个参数to,内部包含跳转之前页面的信息)

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Login',
        redirect: (to) => {
            console.log(to)
            return {
                path: '/user',
                query: {
                    xiaoman: '小满',
                },
            }
        },
    },
    {
        path: '/user',
        name: 'Reg',
        component: () => import('../components/reg.vue'),
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router
AI 代码解读

alisa属性

前排提醒:若要使用alisa则属性中必须有redirect,否则ts将报类型错误

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Login',
        alias: ['/root1', '/root2'],
        redirect: (to) => {
            console.log(to)
            return {
                path: '/user',
                query: {
                    xiaoman: '小满',
                },
            }
        },
    },
    {
        path: '/user',
        name: 'Reg',
        component: () => import('../components/reg.vue'),
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router
AI 代码解读

此时,访问/#/root1和/#/root2跳转到的页面和直接访问/相同

目录
打赏
0
0
0
0
2
分享
相关文章
|
10月前
|
Blob格式转json格式,拿到后端返回的json数据
文章介绍了如何将后端返回的Blob格式数据转换为JSON格式,并处理文件下载和错误提示。
581 0
Blob格式转json格式,拿到后端返回的json数据
SD-WAN异地组网加速:提升企业网络性能的关键
随着企业全球化扩展,异地组网成为重要需求。传统广域网(WAN)存在延迟高、带宽不足等问题,而SD-WAN通过智能流量调度、降低成本、提升安全性和快速部署等优势,成为理想解决方案。本文详细解析SD-WAN在异地组网中的优势、应用场景及最佳实践,帮助企业实现高效跨地域网络连接。
Vue3+Pinia实现Keycloak高效身份验证!
Vue3+Pinia实现Keycloak高效身份验证!
AI技术在智能客服系统中的应用
【8月更文挑战第31天】本文将介绍AI技术在智能客服系统中的应用,包括自然语言处理、机器学习和深度学习等方面的知识。我们将通过一个简单的代码示例,展示如何使用Python和TensorFlow库构建一个简单的智能客服系统。通过阅读本文,您将了解到AI技术如何改变传统客服行业,提高客户满意度和企业效率。
在Vue3+ElementPlus项目中实现一个简单的新增/移除行记录的小组件
在Vue 3和Element Plus项目中创建一个支持新增和移除行记录的简单表格组件。
565 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问