前端路由(vue2 + vue3 + react)

前端路由的设置：
Vue2路由（vue-router3）
安装插件 npm i vue-router@3
router/index.js文件设置

import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); //创建路由器实例 const router = new VueRouter({     mode: 'hash',     routes: [{}] })  export default router 

main.js文件设置

 import router from “./router ”  new Vue({  Render:h=>h(App),  router   }).$mount(“#app”) 

组件中的应用
页面显示
<router-view></router-view>
路由跳转：

<router-link to=”/home”></router-link> 

或者使用编程式导航，this.$route.push/this.$route.replace
两者区别是，前者有history，后者没有。
编程式导航携带可以携带query或者params参数

Vue3路由（vue-router4）
安装插件 npm i vue-router
router/index.ts文件设置

// 引入创建路由对象的函数 import { createRouter,createWebHashHistory,createWebHistory } from "vue-router";  let router = createRouter({     history:createWebHashHistory(),     routes:[{         path:"/register",         component:()=>import("../pages/register/Register.vue")     },{         path:"/login",         component:()=>import("../pages/login/Login.vue")     }]  })  export default router 

main.ts文件设置

import router from './router'; app.use(router) 

vue3路由跳转：
setup函数中没有this，vue2的方法不可用，使用useRouter函数

// 获取路由对象的函数 import { useRouter } from "vue-router" let $router = useRouter() const gohome = ()=>{ $router.push({   path:"/home" }) 

路由元信息：
meta可以将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现。

const routes = [   {     path: '/posts',     component: PostsLayout,         // 只有经过身份验证的用户才能创建帖子         meta: { requiresAuth: true }   ]   } ]