一、路由模式

vue2	vue3
history	createWebHashHistory
hash	createWebHashHashHistory
abstact	createMemoryHistory

注意：

1. hash是带有#号的，因为原理是用location.hash去匹配的

2. 浏览器的左右箭头返回是怎么监听的 通过window.addEventListener('hashchange',(e)=>{ console.log(e)})

1. history没有#号，因为原理是用H5的history实现

2. 浏览器的左右箭头返回是怎么监听的 通过window.addEventListener('popstate',(e)=>{ console.log(e)})

二、命名路由、编程式导航

1. 格式:

const routes = [{path: '/user/:username', name: 'user',component: User}]

2. 用法：在这两种情况下，路由将导航到路径 /user/erina。

声明式导航	编程式导航
<router-link :to="{ name: 'user', params: { username: 'erina' }}">User</router-link>	router.push({ name: 'user', params: { username: 'erina' } })

三、历史记录

声明式	编程式
<router-link :to="..." replace>	router.replace(...)

横跨历史（如：返回上一页）

四、路由传参

方法一（地址栏有参数）

传
router.push({
    path:'路径',
    query:{
        值
    }
})
接收
route.query.值

方法二（地址栏没有参数，存在内存里，刷新就没了）

传
router.push({
    name:'路由名称',
    params:{
        值
    }
})
接收
route.params.值

方式三 动态路由（解决方式二刷新）

路由里
{
path:'/home/:id'
......
}
传
router.push({
    name:'路由名称',
    params:{
        id:值
    }
})

五、嵌套路由

六、命名视图

七、重定向、别名

简单的用法不解释

写回调函数

to为当前父路由的信息

redirect: to => { 
// 方法接收目标路由作为参数
// return 重定向的字符串路径/路径对象 
console.log(to)
return { path: '/search', query: { q: to.params.searchText } } 
},

别名

八、守卫

1.全局守卫