route笔记

路由器的工作模式

1 history模式

优点：URL 更加美观，不带有#，更接近传统网站的URL

缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会404错误

const router = createRouter({

history:createWebHistory(),//history模式

})

2 hash模式

优点：兼容性更好，不需要服务器处理路径

缺点：URL带有#不太美观，且在SEO优化方面相对较差

const router = createRouter({

history:createWebHashHistory(),//history模式

})

RouterLink 中to的不同写法

• 字符串跳转（一种是直接string类型，一种是以对象的形式）

  

• 命名路由的跳转（第一种：string字符串跳转，第二种：对象的方式通过name跳转，第三种：对象的方式通过path跳转）

  

路由_query参数

• 第一种写法

注意使用的是``

• 第二种写法

• 直接从route上面解构信息，会丢失响应式，需要用到toRefs去解决这个问题

  

路由_params参数

在router里面路径的里面写好占位符

当path里面的参数是非必要提供的时候在后面加上问号，这时候无论是否传入这个参数都不会有任何警告

页面里面使用路由的两种写法

路由 _props配置

路由规则的props配置

• props：true（只能处理params参数）

当你配置props为true的时候，你给路由配置了params属性，在你需要使用的页面只需要使用definProps函数基于可以

直接使用props里面的值

• 函数式写法

  

路由_replace属性

路由的一般进入模式为push进入，可以在浏览器的history中前进或者后退

• 当在RouterLink中使用了replace属性后更改浏览器的进入方式

路由的编程导航

脱离实现路由跳转（RouterLink本质上是html里面的一个a标签）

• 通过引入vue-router里面的useRouter方法实现路由跳转