使用Vue实现页面跳转
第一步：安装Vue
首先，我们需要安装Vue.js。打开命令行工具，进入你的项目目录，执行以下命令：
npm install vue
第二步：创建Vue实例
在你的HTML文件中，引入Vue.js库：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
然后，在JavaScript文件中创建Vue实例：
var app = new Vue({
// 配置选项
});
第三步：定义路由
Vue Router是Vue.js官方提供的路由管理库，可以实现页面之间的跳转。首先，需要安装Vue Router：
npm install vue-router
然后，在JavaScript文件中引入Vue Router：
import VueRouter from 'vue-router'
接下来，定义路由表，例如：
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
其中，path表示路由URL，component表示对应的组件。
第四步：创建组件
在Vue中，页面跳转是通过组件来实现的。先创建Home组件和About组件：
const Home = { template: '<div>这是首页</div>' }
const About = { template: '<div>这是关于页面</div>' }
第五步：注册路由和挂载根实例
在JavaScript文件中，注册路由和挂载根实例：
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
注意，$mount('#app')将Vue实例挂载到HTML中的id为app的元素上。
第六步：在HTML中添加路由链接
在HTML文件中，通过router-link标签添加跳转链接：
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
当用户点击链接时，页面会根据路由表中的配置进行跳转。
第七步：展示页面内容
在HTML文件中，通过router-view标签展示页面内容：
<router-view></router-view>
根据用户点击的链接，对应的组件将会被渲染到router-view中。
至此，你已经成功地使用Vue实现了页面跳转。通过Vue Router，你可以轻松实现多个页面之间的切换和导航。