Vue中路由的创建跳转
Posted 小白鼠_糖糖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中路由的创建跳转相关的知识，希望对你有一定的参考价值。
一、创建路由
1、先创建一个route.js文件,创建路由，导出路由。
//创建路由，从vue-router中导入两个方法。
import createWebHistory,createRouter from "vue-router";
//导入需要跳转页面的文件
import FlexWork1 from "../views/FlexWork1";
//创建路由模式
const history = createWebHistory()；
//创建路由对象
const router = createRouter(
history:history,
routes:[
path:\'/FlexWork1\',
name:\'FlexWork1\',
component:FlexWork1
]
)
//导出路由对象
export
router,history
2、引用路由
2.1 需要在main.js文件中导入route.js文件,然后需要注入到main.js createApp中使用,使用.use()
import router from "./router/route
createApp(App).use(router)
二、路由跳转
1、路由的跳转方式有两种，一种是声明式跳转，一种是编程式跳转。
1.1 编程式跳转
@click="clickRouter" 在需要跳转的区域，注意等号右边的名字需要和下面script中声明的名字一样。
import useRouter,useRoute from \'vue-router\'; //在script中导入vue-router的两个方法。
let router = useRouter();
let route = useRoute();
let clickRouter = ()=>
router.push(
name:\'FlexWork1\',
query:
name:\'张三\' //用于路由参数传参，这里使用query
//路由接参在另一个页面 let num = route.query.name 使用num接参
)
2、声明式跳转：使用router-link进行跳转
<router-link to="/FlexWork1">点击</router-link>
以上是关于Vue中路由的创建跳转的主要内容，如果未能解决你的问题，请参考以下文章