您现在的位置是:首页 >学无止境 >Vue3 整合vue-router网站首页学无止境
Vue3 整合vue-router
1.准备工作
-
1.1 安装
vue 3安装 vue-router@4
npm install vue-router@4 --S
-
1.2 配置
-
初始化路由对象
createRouter
用于初始化路由对象,接受一个选项对象作为参数初始化路由最重要的是配置
routes
来确定整个项目的路由匹配规则import { createRouter, createWebHistory } from 'vue-router' import SetupMain from "@/components/01_Composition组合函数/01.setup/SetupMain.vue"; //路由对应表 const pageRoutes = [ {path: '/', redirect:"/setupMain" }, { path: '/setupMain', name: 'setupMain', meta: {isAuth: false}, //懒加载 component: SetupMain }, { path: '/suscomp', name: 'suscomp', meta: {isAuth: false}, //懒加载 component: () => import('../components/03.新的标签/01.Teleport/CompA.vue') } ] const router = createRouter({ history: createWebHashHistory(),//hash模式 //createWebHistory(process.env.BASE_URL),histroy模式 routes: pageRoutes}) export default router
-
挂载路由
使用
app.use()
将创建的路由对象挂载到全局中,挂载之后,我们可以在全局中使用
$router
,$route
,<router-view/>
,<router-link/>
这些api
//修改main.js import { createApp } from 'vue' import App from './App.vue' import router from "@/router"; const app = createApp(App); app.mount('#app') app.use(router);
-
2.Api改变
原来的vue2路由是通过this. r o u t e 和 t h i s . route和this. route和this.router来控制的。现在vue3有所变化,useRoute相当于以前的this. r o u t e ,而 u s e R o u t e r 相当于 t h i s . route,而useRouter相当于this. route,而useRouter相当于this.router
$route
(vue2
)修改为 useRouter
(vue3
)
使用useRoute需要引入 import {useRouter,useRoute} from "vue-router";
import {useRouter} from "vue-router";
setup(){
let router = useRouter();
let route = useRoute();
console.log("接收到的参数" ,route.query)
return{
//将router交出去
router
}
}
//代码中可以利用这种方式进行页面跳转
router.push('/suscomp')
router.push({path:'/suscomp',query:{a:1,b:2}})
//利用route接收query或params参数
route.query
想在B组件中想拿到传来的参数则必须
方法1:使用useRoute创建route实例来拿到prams参数,
方法2:使用router实例 也就是router.currentRoute._value.params拿到传来的参数