©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>vue点击按钮实现页面跳转
<>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组件实现页面跳转：
<template> <div id="app"> <nav> <router-link to="/">Home</router-link> | <
router-link to="/about">About</router-link> </nav> <router-view/> </div> </
template> 在上面的代码中，我们使用了router-link组件来实现页面跳转，to属性定义了跳转的路径， 点击后会自动引导vue-
router进行路由跳转。同时，在App.vue中使用了router-view组件来显示当前路由对应的组件内容。
<>5.在views目录下创建Home.vue和About.vue组件，用于展示不同的页面内容。
<template> <div> <h1>Home Page</h1> </div> </template> 至此，我们就完成了一个简单的vue-
router页面跳转的示例。需要注意的是，这里使用了history模式进行路由跳转， 这意味着我们需要配置服务器，以便在浏览器中刷新页面时不会出现404
错误。如果不需要使用history模式， 可以将router.js中的mode属性改为hash模式。