【vue3路由】单击按钮、跳转页面
【代码】【vue3路由】单击按钮、跳转页面。
·
/home.vue页面代码:
<template>
<el-button class="btu" @click="goEcharts">点击进入echarts</el-button>
</template>
import { useRouter } from 'vue-router';
const router = useRouter();
function goEcharts(){
router.push({path:'/echarts'})
}
/router/index.ts页面代码:
import { createRouter, createWebHistory } from "vue-router";
let routes= [
{
path: '/',
name: 'home',
//使用import可以路由懒加载,如果不使用,太多组件一起加载会造成白屏
component: () => import('../view/home.vue')
},
{
path:'/echarts',
name:'echart',
component:() => import('../view/echarts.vue')
}
// {
// // 配置404页面
// path: '/:catchAll(.*)',
// name: '404',
// component: () => import(''),
// }
]
// 路由
const router = createRouter({
history: createWebHistory(),
routes
})
// 导出
export default router
更多推荐
已为社区贡献2条内容
所有评论(0)