Vue3-路由知识点

一、路由工作模式

1. history模式

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

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

const router = createRouter({
????????history:createWebHistory()，//history模式
}）

2. hash 模式

优点:兼容性更好，因为不需要服务器端处理路径

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

const router = createRouter({

????????history:createWebHashHistory()， //hash模式

}）

3.vue2中的路由工作模式写法

Vue2:

????????mode:'history

二、路由传参模式

1. query模式

跳转组件接受参数

2. params模式

路由必须有名字，且只能用name传递！

在配置文件中必须提前配置好变量占位！

传的值不可以是对象或者数组！

占位的变量必须要传！除非加了问号，那就可以传可以不传

三、路由的props配置

为什么要配置props

因为路由组件并不会直接以标签的形式出现，例如<home/>,因此我们没有办法像给一般组件传值一样给路由组件传值，所以需要配置props

开启props，跳转组件中申明接受，就可以直接使用传递的参数了

1.第一种写法（只能接收params参数）

2.第二种写法（params参数和query参数都能接收）

一般用来接收query参数，因为要接收params参数的话直接用第一种方法就可以了

四、路由的编程式导航

route-link最终都是a标签，如果需要不同的需求，例如点击按钮路由跳转，此时就需要编程式路由导航