您现在的位置是：首页 >技术教程 >1、vue-router切换路由的方式（命名路由和编程式导航和历史记录）网站首页技术教程

/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>