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

此时访问/相当俞访问/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

第三种:函数写法(支持传入一个参数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

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

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

相关文章
|
9月前
|
存储 Linux iOS开发
格式化指南:格式化选NTFS、FAT32还是 exFAT?
NTFS、FAT32和exFAT是平时很常用的三种文件系统,每个文件系统各自有优缺点,适用于不同的场景。如果自己不知道该如何选择,不用担心,本文会细讲解这三个文件系统的特点与适用情况,帮助您轻松作出正确的选择。
|
JSON 数据格式
Blob格式转json格式,拿到后端返回的json数据
文章介绍了如何将后端返回的Blob格式数据转换为JSON格式,并处理文件下载和错误提示。
905 0
Blob格式转json格式,拿到后端返回的json数据
|
11月前
|
人工智能 计算机视觉 网络架构
OpenAI攻克扩散模型短板,清华校友路橙、宋飏合作最新论文
扩散模型在生成AI领域取得显著成果,但其训练不稳定性和采样速度慢限制了发展。OpenAI与清华校友合作,提出连续时间一致性模型(CMs),通过TrigFlow等创新解决了这些问题,大幅提升了训练稳定性和计算效率,实现了与最优模型相当的样本质量,同时减少了计算资源消耗。
194 2
|
12月前
|
运维 监控 安全
SD-WAN异地组网加速:提升企业网络性能的关键
随着企业全球化扩展,异地组网成为重要需求。传统广域网(WAN)存在延迟高、带宽不足等问题,而SD-WAN通过智能流量调度、降低成本、提升安全性和快速部署等优势,成为理想解决方案。本文详细解析SD-WAN在异地组网中的优势、应用场景及最佳实践,帮助企业实现高效跨地域网络连接。
|
机器学习/深度学习 人工智能 自然语言处理
AI技术在智能客服系统中的应用
【8月更文挑战第31天】本文将介绍AI技术在智能客服系统中的应用,包括自然语言处理、机器学习和深度学习等方面的知识。我们将通过一个简单的代码示例,展示如何使用Python和TensorFlow库构建一个简单的智能客服系统。通过阅读本文,您将了解到AI技术如何改变传统客服行业,提高客户满意度和企业效率。
|
安全 Unix Linux
|
机器学习/深度学习 搜索推荐 算法
必知的技术知识:FM与FFM深入解析
必知的技术知识:FM与FFM深入解析
140 0
【Vue3】vue3 中 watch 和 watchEffect 的区别
【Vue3】vue3 中 watch 和 watchEffect 的区别
220 0