Vue3之路由

首先，得先安装路由，可以通过npm install vue-router@next --save.官网地址

使用

// router.js
import { createRouter, createWebHashHistroy } from "vue-router";
// 这里也可以结合之前我们学到的异步组件，还记得defineAsyncComponent这个API吗，返回去看看哦
import Home from "./Home.vue";
import About from "./About.vue";
import UserProfile from "./UserProfile.vue";
// 简单演示，更多功能请参考官网
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About,
    children:[{
        // 这就是嵌套路由
        // 当 /about/profile 匹配成功，path前面不用加/。
        path: 'profile',
        component: UserProfile,
    }]
  },
]
const router = createRouter({
  // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
export default router

// 主入口main.js
// 这里路径只做演示
import router from "./router.js"
const app = Vue.createApp({})
app.use(router)
app.mount('#app')

全局守卫

const router = createRouter({ ... })
// 全局前置守卫:可以做用户权限等功能
router.beforeEach((to, from) => {
  // 返回 false 以取消导航
  return false
})
// 全局后置守卫：做更改页面标题、页面访问量的统计等
router.afterEach((to, from) => {
  ...
})

路由跳转、路由组件内守卫

<script setup>
  import {useRouter, useRoute，onBeforeRouteUpdate, onBeforeRouteLeave} from "vue-router";
  // router是vue-router的实例，是一个全局对象，包含了路由跳转，路由钩子等
  const router = useRouter();
  // 就可以像vue2一样使用了，注意vue3的组合式API(Composition API)是没有this这个概念的
  router.push("/")
 // route是当前活跃的路由信息，是一个局部对象，包含了params，query，name等
  const route = useRoute();
  cosole.log(route.params.id)
 // 注意，VCA(Vue Composition API)没有onBeforeRouteEnter这个路由钩子，可以使用全局路由守卫做处理
 // 路由更新
 onBeforeRouteUpdate((to,from)=>{
 })
 // 路由离开之前
 onBeforeRouteLeave((to,from)=>{
 })
</script>
// 如果你真的想使用[进入路由之前]这个钩子，因为VCA不提供，只能使用Options API，你可以这样:同一个vue文件写<script setup></script>和<script></script>
<script>
  export default{
    // 进入路由之前：因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建，所以不能访问this
    beforeRouteEnter(to,from,next){
      next(vm=>{
        // 通过 `vm` 访问组件实例,就相当于访问this了
      })
    }
  }
</script>
// 注意：以上写法极其不推荐，而且一个vue文件只能包含一个<script setup></script>和一个<script></script>