vue3.x版本路由使用和页面跳转配置

1.安装vue-router

npm install vue-router --save

2.新建文件routes.js文件，和main.js同一级目录下，具体文件代码如下：

import {createRouter,createWebHashHistory} from 'vue-router'
import infoList from "./components/infoList.vue"
import Home from "./components/maini.vue"
const router = createRouter({
  history: createWebHashHistory(),
 routes: [
  { path: '/', component: Home },
  { path: '/infoList', component: infoList }  
 ],
}) 
export default router

3.紧接着在main.js文件中配置如下信息：

import { createApp } from 'vue'
import App from './App.vue'
//引入路由
import router from './routes'
const app = createApp(App)
//挂载路由
app.use(router)
app.mount('#app')

4.使用

在App.vue文件入口文件中，配置如下：

<template>
<router-view></router-view>
</template>

函数式编程跳转：

第一个mini.vue页面使用

<button class="button button2" @click="toList()">LDI看板</button>

 methods:{
          toList(){ 
              this.$router.replace({ path: 'infoList' }); 
          }
   }

跳转页面的方式还可以是标签式，这里就不介绍了。