1.安装vue-router：
npm install vue-router

2.在main.js中引入并使用vue-router：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')

3.在src目录下创建router.js文件，并配置路由：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const routes = [
{

path: '/',
name: 'Home',
component: Home

},
{

path: '/about',
name: 'About',
component: About

}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

4.在App.vue中使用router-link组件实现页面跳转：

在上面的代码中，我们使用了router-link组件来实现页面跳转，to属性定义了跳转的路径，
点击后会自动引导vue-router进行路由跳转。同时，在App.vue中使用了router-view组件来显示当前路由对应的组件内容。

5.在views目录下创建Home.vue和About.vue组件，用于展示不同的页面内容。

至此，我们就完成了一个简单的vue-router页面跳转的示例。需要注意的是，这里使用了history模式进行路由跳转，
这意味着我们需要配置服务器，以便在浏览器中刷新页面时不会出现404错误。如果不需要使用history模式，
可以将router.js中的mode属性改为hash模式。