Vue3-33-路由-路由的别名配置 alias

别名的作用

路由中的别名配置,可以实现 多个路径 对应 同一个路由。

例如 :

路由的路径是 /a;

配置别名为 : /a2;

则 访问 /a/a2 的时候,都可以访问到 同一个组件。

别名的特点

关键字 : alias
当通过别名进行路由访问时,路由地址不会发生替换;

当通过重定向进行路由访问时,路由地址发生替换。

以上就是 别名重定向 的区别。

别名的使用

有三种基本的使用方式:

1、简单的指定一个别名;

2、可以指定数组的形式;

3、嵌套路由 需要使用相对路径的形式,即,前面不可以/非嵌套路由 中的别名,必须有/

4、如果 原路径参数中存在参数,请在 别名配置的 绝对路由中包含该参数,其实就是 参数前面要有 /

》下面的案例只展示 关键的路由配置。

1、简单使用

ts 复制代码
// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 引入组件
import componentC from "./componentC.vue";

// 声明路由跳转的路径与组件的对应关系
const routsList = [
    {
        path:'/c',
        name:'croute',
        component:componentC,
        alias:'/c2'
        
    }

]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

》 运行效果

原路径访问 别名路径访问

2、指定数组的形式

ts 复制代码
// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 引入组件
import componentC from "./componentC.vue";

// 声明路由跳转的路径与组件的对应关系
const routsList = [
    {
        path:'/c',
        name:'croute',
        component:componentC,
        alias: ['/c3','/c4']
        
    }

]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

》 运行效果

原路径 别名1 别名2

3、嵌套路由的相对路径

ts 复制代码
// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 引入组件
import componentA from "./componentA.vue";
import componentC from "./componentC.vue";

// 声明路由跳转的路径与组件的对应关系
const routsList = [
    {
        path:'/a',
        name:'aroute',
        component:componentA,
        children:[
            {path:'c',component:componentC,alias:['c2','c3/c31']}
        ]
        
    }

]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

》 运行效果

原路径 别名1 别名2

4、带参数的形式

复制代码
当原路由中存在 【路径参数】时,
别名中也需要通过【绝对路径】的方式携带上参数。

情景一 :不存在嵌套路由

ts 复制代码
// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 引入组件
import componentC from "./componentC.vue";

// 声明路由跳转的路径与组件的对应关系
const routsList = [
    {
        path:'/c/:cname',
        component:componentC,
        alias:['/c2/:cname','/:cname']
    }

]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

》运行效果

原路径 别名1 别名2

情景二 : 存在嵌套路由

ts 复制代码
// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 引入组件
import componentA from "./componentA.vue";
import componentC from "./componentC.vue";

// 声明路由跳转的路径与组件的对应关系
const routsList = [
    {
        path:'/a/:apname',
        name:'aroute',
        component:componentA,
        children:[
            {path:'c',component:componentC,alias:['c2','c3/:apname2','/:apname3']}
        ]
    }
]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

》运行效果

原路径 别名1
别名2 别名3

至此,路由别名配置的案例就完成了。

相关推荐
贾全4 小时前
MoE 的“大脑”与“指挥官”:深入理解门控、路由与负载均衡
人工智能·负载均衡·大语言模型·路由·moe·多模态ai·门控
路光.2 天前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
前端OnTheRun2 天前
React18学习笔记(三) ReactRouter--React中的路由,案例--记账本
react.js·路由·reactrouter
wuzuyu36511 天前
用php做一个简易的路由
php·路由
Wiktok11 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
Wiktok12 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok13 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
是罐装可乐13 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
知识分享小能手13 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Wiktok14 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin