前端路由(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 }
  ]
  }
]