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.$route和this.$router来控制的。现在vue3有所变化，useRoute相当于以前的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拿到传来的参数