1. <router-link> 路径跳转

/src/router/index.ts 写好路径

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        component: () => import('../pages/Login.vue')
    },
    {
        path: "/register",
        component: () => import('../pages/Register.vue')
    }
]

/src/App.vue 实现跳转

<template>
    <router-link to="/">login</router-link>
    <router-link to="/register" style="margin-left: 20px;">register</router-link>
    <router-view></router-view>
</template>

2. <router-link> 名称跳转

/src/router/index.ts 写好名称

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "Login",
        component: () => import('../pages/Login.vue')
    },
    {
        path: "/register",
        name: "Register",
        component: () => import('../pages/Register.vue')
    }
]

/src/App.vue 实现跳转

<template>
    <router-link :to="{name: 'Login'}">login</router-link>
    <router-link :to="{name: 'Register'}" style="margin-left: 20px;">register</router-link>
    <router-view></router-view>
</template>

3. <a> 路径跳转

/src/App.vue 实现跳转

<template>
    <a href="/">登录</a>
    <a href="/register" style="margin-left: 20px;">注册</a>
    <router-view></router-view>
</template>

需要注意的是，<a> 实现的跳转会引起页面的刷新，而 <router-link> 不会

4. 编程式跳转

4.1 直接路径形式

/src/App.vue

<template>
    <!-- 将路径传递进事件，实现编程式导航 -->
    <button @click="login('/')">登录</button>
    <button @click="register('/register')" style="margin-left: 20px;">注册</button>
    <router-view></router-view>
</template>

<script setup lang="ts">
// 引入 useRouter 的 hook
import { useRouter } from 'vue-router'
// 创建一个路由控制器
const router = useRouter()
const login = (str: string) => {
    // 调用 push 实现跳转
    router.push(str)
}
const register = (str: string) => {
    router.push(str)
}
</script>

4.2 对象路径形式

/src/App.vue 其它代码不变，只改变以下代码

const login = (str: string) => {
    router.push({
        path: str
    })
}
const register = (str: string) => {
    router.push({
        path: str
    })
}

4.3 对象名称形式

/src/App.vue

<template>
    <!-- 将路由名称传递进事件，实现编程式导航 -->
    <button @click="login('Login')">登录</button>
    <button @click="register('Register')" style="margin-left: 20px;">注册</button>
    <router-view></router-view>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const login = (str: string) => {
    router.push({
        name: str
    })
}
const register = (str: string) => {
    router.push({
        name: str
    })
}
</script>