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跳转到的页面和直接访问/相同

相关文章
|
3月前
|
缓存 网络架构
vue2进阶篇:vue-router之基础路由
vue2进阶篇:vue-router之基础路由
69 4
|
3月前
|
缓存 JavaScript 前端开发
vue2进阶篇:安装路由
vue2进阶篇:安装路由
81 2
|
3月前
|
缓存
vue2进阶篇:vue-router之路由的2种工作模式
vue2进阶篇:vue-router之路由的2种工作模式
37 0
|
8月前
|
JavaScript 网络架构 开发者
阿珊解说Vue中`$route`和`$router`的区别
阿珊解说Vue中`$route`和`$router`的区别
|
运维 JavaScript API
Vue-Router总结大全,从小白到精通,含vue3.0路由用法
Vue-Router总结大全,从小白到精通,含vue3.0路由用法
302 0
Vue-Router总结大全,从小白到精通,含vue3.0路由用法
|
前端开发
前端学习笔记202304学习笔记第十七天-vue3.0-vue-router4.0x的基本使用
前端学习笔记202304学习笔记第十七天-vue3.0-vue-router4.0x的基本使用
81 0
|
前端开发
前端学习笔记202304学习笔记第十七天-vue3.0-vue-router的基本用法2
前端学习笔记202304学习笔记第十七天-vue3.0-vue-router的基本用法2
69 0
|
前端开发
前端学习笔记202304学习笔记第十七天-vue3.0-vue-router的基本用法1
前端学习笔记202304学习笔记第十七天-vue3.0-vue-router的基本用法1
65 0
|
前端开发
前端学习笔记202304学习笔记第十七天-vue3.0-什么是vue-router
前端学习笔记202304学习笔记第十七天-vue3.0-什么是vue-router
83 0
Pinia+Router学习笔记(十四)
本节记录Vue-Router中路由过渡动效相关内容
119 0