1、vue

vue"/>

1、vue

/src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";// 路由数组的类型 RouteRecordRaw
const routes: Array<RouteRecordRaw> = [{path: '/',// 命名路由// 好处：不需要path: '/'这样url硬编码的形式去跳转路由// 名字需唯一，不要和其他组件的路由名字重复name: 'Login',component: () => import('../components/Login.vue')},{path: '/reg',name: 'Reg',component: () => import('../components/Reg.vue')}
];const router = createRouter({history: createWebHistory(),routes
})export default router;

/src/main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 使用./router代替./router/index.ts，引入时可以省略index.ts
import router from './router';const app = createApp(App);app.use(router);
app.mount('#app');

/src/App.vue

前言：如果页面直接使用a标签，切换a标签时具有默认行为，会刷新页面

<template><!-- 如果页面直接使用a标签，切换a标签时具有默认行为，会刷新页面--><a href="/">登录</a><a href="/reg">注册</a></template>

一、使用<router-link>自定义标签切换路由，不会刷新页面

<router-link>链接方式一

to等于字符串，字符串的值是路由里path的值

<template><!-- 一、使用<router-link>自定义标签切换路由，不会刷新页面 <router-link>链接方式一to等于字符串，字符串的值是路由里path的值--><router-link to="/">登录1</router-link><router-link to="/reg">注册1</router-link><router-view></router-view></template>

<router-link>链接方式二

:to等于对象，对象的内容和router.push()的内容一致

<template><!-- <router-link>链接方式二:to等于对象，对象的内容和router.push()的内容一致--><router-link :to="{ name: 'Login' }">登录2</router-link><router-link :to="{ name: 'Reg' }">注册2</router-link><router-view></router-view></template>

二、使用编程式导航切换路由，给标签添加点击事件

router.push() 会保留历史记录，浏览器地址栏的左右箭头可以点击

router.replace() 不会保留历史记录，浏览器地址栏的左右箭头不能点击

1、router.push()

（1）goJump()的参数是路由里path的值

<script setup lang="ts">
import { useRouter } from "vue-router";const router = useRouter();const goJump = (path: string) => {// 编程式导航router.push(）// 1、push字符串路径// router.push(path);// 2、push路径对象router.push({path});
}
<template><!-- 二、使用编程式导航切换路由，给标签添加点击事件 --><!-- goJump()的参数是路由里path的值 --><button @click="goJump('/')">登录3</button><button @click="goJump('/reg')">注册3</button><router-view></router-view></template>

（2）goJump()的参数是路由里name的值

<script setup lang="ts">
import { useRouter } from "vue-router";const router = useRouter();const goJump = (path: string) => {// 3、push名字对象router.push({name: path});
}
<template><!-- goJump()的参数是路由里name的值 --><button @click="goJump('Login')">登录4</button><button @click="goJump('Reg')">注册4</button><router-view></router-view></template>

2、router.replace()

（1）直接在<router-link>标签写replace属性

<template><!-- replace 不会保留历史记录，浏览器地址栏的左右箭头不能点击了 --><!-- （1）直接在<router-link>标签写replace属性 --><router-link replace to="/">登录5</router-link><router-link replace to="/reg">注册5</router-link><router-view></router-view></template>

（2）使用router.replace()方法

（3）在router.push()中增加replace属性

<script setup lang="ts">
import { useRouter } from "vue-router";const router = useRouter();const toJupm = (url: string) => {// （2）使用router.replace()方法// router.replace(url);// （3）在router.push()中增加replace属性router.push({path: url,replace: true})}</script><template><button @click="toJupm('/')">登录6</button><button @click="toJupm('/reg')">注册6</button><router-view></router-view></template>