（4）vue3实现路由跳转，简单案例

目录

第一步在src/views目录下添加两个vue文件

添加Page1.vue

添加Page2.vue

第二步在路由数组中添加路由

第三步运行项目

拓展

实现编程式页面跳转

---

你至少有两个页面

第一步在src/views目录下添加两个vue文件

添加Page1.vue

<script setup>

</script>

<template>

  <div>

    <h1>Page1</h1>

    <router-link to="/page2">跳转page2</router-link>

  </div>

</template>

添加Page2.vue

<script setup>

</script>

<template>

<div>

  <h1>Page2</h1>

  <router-link to="/page1">跳转page1</router-link>

</div>

</template>

第二步在路由数组中添加路由

在src/router/index.js文件

{
        path:'/page1',name: 'page1', component: () => import('../views/Page1.vue')

      },

      {

          path:'/page2',name: 'page2', component: () => import('../views/Page2.vue')

      },

第三步运行项目

查看是否实现页面跳转

拓展

实现编程式页面跳转

这里还是使用Page1.vue,Page2.vue

Page1.vue文件

<script setup>

import router from "@/router/index.js";

</script>

<template>

<div>

  <h1>Page2</h1>

  <router-link to="/page1">跳转page1</router-link>

  <button @click="router.push('/page1')">push方法点击我跳转page1</button>

  <button @click="router.replace('/page1')">replace方法点击我跳转page1</button>

</div>

</template>

Page2.vue文件

<script setup>

import router from "@/router/index.js";

</script>

<template>

  <div>

    <h1>Page1</h1>

    <router-link to="/page2">跳转page2</router-link>

    <button @click="router.push('/page2')">跳转page2</button>

    <button @click="router.replace('/page2')">跳转page2</button>

  </div>

</template>

解释一哈，@是v-on的简写用于监听事件。 @click就监听鼠标点击事件。

这里router对象的push和replace方法的作用有所不同。 push方法是往当前路由访问表里添加一个新的路由访问，也就是可以通过浏览器回退键回退到跳转前的页面.replace方法则是将当前页面替换为跳转页面下面是图片展示帮助你理解

重开一个标签页

哈哈你会了吗？