VUE3 入门开发之利用 Vue-Router 实现页面跳转

在 VUE3 的开发过程中，页面跳转是一项基础且重要的功能，而 Vue-Router 就是实现这一功能的关键工具。掌握利用 Vue-Router 实现页面跳转，能让开发者构建出具备良好用户体验的单页面应用。

要使用 Vue-Router，需进行安装和配置。通过 npm 或 yarn 安装 Vue-Router 后，在项目中引入并创建路由实例。在路由配置文件里，定义各个路由的路径和对应的组件。例如：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

这样就完成了基本的路由配置。

接着是实现页面跳转。在 VUE 组件中，有多种方式实现跳转。一种是使用 <router - link> 标签，这是最直观的方式。比如在模板中：

<router - link to="/">首页</router - link>
<router - link to="/about">关于</router - link>

点击对应的链接，就能跳转到指定的页面。

另一种方式是在代码中使用编程式导航。例如在组件的方法中：

import { useRouter } from 'vue-router'

export default {
  methods: {
    goToPage() {
      const router = useRouter()
      router.push('/about')
    }
  }
}

这里通过 useRouter 钩子函数获取路由实例，然后使用 push 方法实现页面跳转。push 方法会向历史记录栈中添加一个新的记录，而 replace 方法则会替换当前的历史记录。

利用 Vue-Router 实现页面跳转，为 VUE3 应用开发提供了强大的导航功能。开发者可以根据实际需求，灵活选择合适的跳转方式，优化用户交互体验，让应用的页面切换更加流畅和高效，为构建复杂且功能丰富的单页面应用奠定坚实基础。