VUE使用vue-router设置路由进行页面跳转

一、下载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页面

    点击跳转