前端路由的几种模式（前端路由(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-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 } ] } ]