10分钟快速上手VueRouter4.x教程：

VueRouter是Vue.js官方的路由管理器，用于处理单页应用程序的导航，它可以帮助我们在Web应用程序中导航和管理视图，并且也可以控制浏览器的前进和后退。VueRouter可以非常快速地搭建起一个SPA应用，通过本教程，您可以在10分钟内了解如何在Vue 4.x项目中使用VueRouter。

安装vue-router

在开始任何VueRouter项目之前，必须首先安装Vue.js，另外也需要安装VueRouter。如果您已经开始一个Vue.js项目那么可以直接使用npm或者yarn安装VueRouter。请执行以下命令进行安装：

npm install vue-router@4.x --save

路由基础

Vue路由的核心是一个用于映射 URL 和组件的路由表。让我们首先看一个简单的例子：

import { createRouter, createWebHashHistory } from 'vue-router'

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

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

上面代码的意思是：

• 使用VueRouter的 createRouter 方法创建一个路由实例；
• 使用 hash 模式创建 createWebHashHistory；
• 定义一个路由表，包含两个路径和对应的组件 Home 和 About；
• 将这个路由表配置到路由实例中。

声明式导航

在Vue.js中，可以通过使用 router-link 组件来实现声明式导航。

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

上述的代码使用了 router-link 组件来渲染一个带有 “Home” 和 “About” 的超链接，通过设置 to 属性来指定了这些超链接对应的路径。

点击导航

可以使用 router.push 访问路径并更新路由状态，从而实现编程式导航。

// 通过path
router.push({ path: '/' })

// 通过name
router.push({ name: 'foo' })

// 通过查询参数和参数
router.push({ path: '/', query: { q: 'vue' }, params: { id: '1' }})

上述的 router.push 方法会让 router 导航到不同的路径，并更新 URL 和路由状态。

完整示例

下面是一个完整的Vue.js应用程序，包含一个路由实例、声明式导航和编程式导航。

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

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp({
  router,
  template: `
    <div>
      <h1>Vue Router Example</h1>
      <p>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </p>
      <button @click="$router.push('/')">Go Home</button>
    </div>
  `
}).mount('#app')

上述代码中，我们首先定义了两个视图组件：Home 和 About。而在路由表中，我们将这些组件分别关联到了两个不同的路径上。然后通过使用 createRouter 函数和路由配置来创建了一个 router 实例。接着，我们使用了 router-link 组件渲染了两个超链接，用于实现声明式导航，还添加了一个按钮来实现编程式导航。

通过本教程，您已经了解了基础的VueRouter知识，请尝试使用VueRouter在您的Vue.js项目中实现页面路由跳转功能。