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

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

相关推荐
西凉河的葛三叔18 小时前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
xiaohuatu18 小时前
CSRF保护--laravel进阶篇
vue3·laravel·csrf
半度℃温热6 天前
ERROR TypeError: AutoImport is not a function
webpack·vue3·element-plus·插件版本·autoimport
朝阳397 天前
vue3 中直接使用 JSX ( lang=“tsx“ 的用法)
vue3·tsx·jsx
xcLeigh7 天前
VUE3实现简洁的特色美食网站源码
前端·源码·vue3
陈逸子风10 天前
(系列十一)Vue3框架中路由守卫及请求拦截(实现前后端交互)
vue3·webapi·权限·流程·表单
爱分享的Hayes小朋友11 天前
如何用post请求调用Server-Sent Events服务
前端·vue3·sse·post
Coisini_甜柚か13 天前
打字机效果显示
前端·vue3·antv
Modify_QmQ13 天前
初识Electron & 进程通信
electron·vue3·桌面端
Bessie23414 天前
实现 Nuxt3 预览PDF文件
pdf·vue3·nuxt3