vue3：22、vue-router的使用

注意 

• 【路由组件】通常存放在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)