一、下载vue-router插件
在项目终端输入 npm install vue-router
npm install vue-router
二、设置路由
新建router文件夹,文件夹内新建 router.js
在router.js里面设置路由,有几个页面需要跳转就设置几个路由
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../components/Home.vue' //引入Home页面
import Analysis from '../components/Analysis.vue' //引入Analysis页面
const routes = [
{
path:'/',
redirect:'/Home'
},
{
path:'/Home',
component:Home
},
{
path:'/Analysis',
component:Analysis
},
]
const router =createRouter({
history:createWebHashHistory(),
routes
})
export default router
三、引入新建的router.js到main.js中
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router' //引入router.js
createApp(App).use(router).mount('#app')
四、实现页面跳转
在需要点击跳转的地方用 router-link 框住,例如点击button跳转到index页面
<router-link to="/index">
<button>点击跳转</button>
</router-link>