Vue3学习日记 Day5 —— Router4路由解析

vue-router4路由解析

1、与router3相比的变化

    1.1、不再一次性导入，而是按需导入

    1.2、创建路由实例的方式修改为了 createRouter

    1.3、路由模式设置由mode改为了history

        history模式使用 createWebHistory()

        hash模式使用 createWebHashHistory()

        参数：

            代表所访问路径的前缀

            默认给出的import.meta.env.BASE_URL意味着导入了vite.config.js中的base项所给的地址

 

2、页面切换方式

    2.1、template中

        可以直接通过$router.push('路由路径')进行跳转

        

    2.2、script中

        注：在script中，不可以再通过this.$router来获取路由方法，需要通过方法来获取

        2.2.1、useRouter()

            需要先从vue-router中导入，用于获取路由对象

        2.2.2、useRoute()

            需要先从vue-router中导入，用于获取路由信息

    2.3、如：

        <script setup>

        import { useRoute, useRouter } from 'vue-router'

        

        const Router = useRouter()

        const Route = useRoute()

        

        const index = () => {

          Router.push('/主页')

          console.log(Router)

          console.log(Route)

        }

        </script>

        

        <template>

          <div class="app">APP</div>

          <button @click="$router.push('/谷歌')">谷歌</button>

          <button @click="index">主页</button>

        </template>