路由

// 全局路由守卫配置
router.beforeEach((to,from,next)=>{
    next(true);  
})

Hash 实现

hash是URL中hash（#） 以及后面部分组成，常用在作用锚点在页面内进行导航，改变URL中的hash部分不会引起页面刷新。

通过hash change时间监听URL的变化，改变URL的方式只有这几种；

1. 通过浏览器前进后退
2. 通过<a>标签改变URL
3. 通过window.location改变URL

通过

location.hash     // 进行跳转

location.hash='/reg'     // 进行跳转

window.addEvenListener('hashchange',(e)=>{
    console.log(e)
})

history实现

history 提供了pushState 和 replaceState两个方法，这连个方法改变URL的path部分不会引起页面的刷新

history 提供类似hashchange事件popstate事件，但popstate事件有些不同：

1. 通过浏览器前进后退改变URL时触发popstate事件
2. 通过pushState/replaceState或<a>标签改变URL不会触发popstate事件
3. 好在我们可以拦截pushState/replaceState的调用和<a>标签的点击事件来监测URL变化
4. 通过js调用history的back,go,forward方法可触发该事件

所以监听URL变化可以实现，只是没有hashchange那么方便。

window.addEventListener('popstate',(e)=>{
    console.log(e)
})

名字跳转

<router-link :to="{name:'index'}">首页</router-link>

编程页面跳转

<button @click="toPage('/edit')">个人中心</button>


<script setup lang="ts">
    import { useRouter } from 'vue-router'

    const router = useRouter()

    const toPage = (url:string)=>{
        // 字符串
        router.push(url);
        //对象
        // 命名格式
        router.push({
            // path:url,
            name:url
        })
    }
</script>

不存在历史记录

• roterlink 直接诶加上replace

  • 首页

• router.replace(url);

路由传参

query方式传参