您现在的位置是:首页 >学无止境 >Vue3 整合vue-router网站首页学无止境

Vue3 整合vue-router

LvhaoIT 2024-06-17 11:18:53
简介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. routethis.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

$routevue2)修改为 useRoutervue3

使用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拿到传来的参数

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。