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