router-link定义别名_router-link 名称-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44389618/article/details/137375908

本文介绍了如何在Vue应用中使用router的alias属性定义路由别名，以及如何通过命名路由、查询参数、动态传参和编程式导航实现导航功能。详细展示了两种不同的编程式导航写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

router 定义别名的方法

定义别名我们需要使用到alias属性，写法如下：

const routes = [
    {
        alias:'/home',
        path: '/',
        component:()=>import("../views/index.vue")
    }
]

在浏览器中输入
http://192.168.1.47:8080/home
和
http://192.168.1.47:8080/
两个的访问结果是一样的。

路由命名

{
        path: '/user/:id/name/:name?',
        name:"member",//命名路由
        component:()=>import("../views/user.vue")
    }

页面调用

<template>
 <div>
   我是index
 </div>

 <router-link to="/content?id=007&title=XKG">查询字符串</router-link><br />
 <router-link to="/user/004/name/XKG">路径传参</router-link><br />

 <!--   动态传参 -->
 <router-link :to="{path:'/content',query:{id:200,title:'XKG'}}">动态传参</router-link>
<bR />
 <!-- 动态属性绑定2 -->
 <router-link :to="{ name:'member',params:{id:200,name:'XKG'}}">路由命名</router-link>
</template>

编程式导航
写法一：

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goto = () => router.push("/content?id=007&title=XKG")
</script>

写法二：

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goto = () => router.push({ name: 'member', params: { id: 200, name: 'XKG' } })
</script>

页面调用方式：

<button @click="goto()">编程式导航</button>