注意
- 【路由组件】通常存放在pages或views文件夹,【一般组件】通常存放在components文件夹
- 通过点击导航,视觉上“消失”了的路由组件,默认是被卸载掉的,需要的时候再去挂载
前端路由的两种模式
history 模式
- 优点: URL 更加美观,不带有 # ,更接近传统的网站 URL。
- 缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有 404 错误
const router = createRouter({
history:createWebHistory(), //history模式
})
如果使用history模式,nginx的配置如下
hash 模式
- 优点:兼容性更好,因为不需要服务器端处理路径。
- 缺点: URL 带有 # 不太美观,且在 SEO 优化方面相对较差
const router = createRouter({
history:createWebHashHistory()
}) //hash模式
import { createRouter, createWebHistory } from 'vue-router'
//history模式:createWebHistory
//hash模式:createWebHashHistory
//vite中的环境变量 import.meta.env.BASE_URL 就是vite.config.js中的base配置项
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: []
})
export default router
接收参数
import {toRefs} from 'vue'
import { useRoute } from 'vue-router';
let route = useRoute()
let {query} = toRefs(route)
console.log(query)