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>