vue页面跳转怎么回事

vue是一种现代化的javascript框架，常用于构建单页应用程序（spa）。spa允许用户在不重新加载整个页面的情况下导航不同的页面和页面组件。在vue中，页面跳转主要是通过路由来实现的。

路由是一种将URI与组件相映射的机制。URI是网址的一部分，如"https://example.com/user/123"。 URI中的/user/123部分被称为路由路径。在Vue中，路由通过Vue Router来实现。

Vue Router是Vue.js官方的路由管理器。使用Vue Router，可以定义路由并将路由路径映射到Vue组件。Vue Router还提供了路由导航功能，使用户能够在不重新加载整个页面的情况下导航到不同的页面和页面组件。路由导航可以是通过链接（如）或编程方式（如this.$router.push('/')）实现的。

Vue Router的基本用法如下：

1. 安装Vue Router

npm install vue-router

2. 创建路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在上面的代码中，我们创建了两个路由："home"和"about"，分别映射到Home和About组件。路由路径分别为"/"和"/about"。

人民网AIGC-X

国内科研机构联合推出的AI生成内容检测工具

下载

立即学习“前端免费学习笔记（深入）”；

3. 在Vue组件中使用路由

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

在上面的代码中，我们使用<router-link></router-link>组件来创建路由链接，并使用<router-view></router-view>组件来渲染当前路由匹配的组件。

4. 导航到不同的路由

<template>
  <div>
    <button @click="goToHome">Go to Home</button>
    <button @click="goToAbout">Go to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/')
    },
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

在上面的代码中，我们通过编程方式导航到不同的路由。使用this.$router.push()方法将当前路由路径更改为新的路径。

总之，Vue Router提供了一个灵活且易于使用的路由机制。通过定义路由并将路由路径映射到Vue组件，我们可以创建单页应用程序并允许用户在不重新加载整个页面的情况下导航到不同的页面和页面组件。