前端Router4.x与Router3.x常用方法差异

Router4.x其实和Router3.x大部分api相似，变化部分不多，仅做简单笔记，有问题请翻阅官方文档

创建router

history相比较Router3.x略有变化:

可选 createWebHashHistory(),createWebHistory()

分别对应3.x版本的Hash模式和History模式

Hash模式

URL中有一个#号，http://localhost:3000/#/about, #号后面的就是Hash地址，这个模式以前是SPA的常用模式，但是链接有一个#号比较丑

History模式

和正常的链接地址一样的，http://localhost:3000/about, 这个地址很优雅，但是有一个问题，需要服务器支持。 原因是浏览器中输入http://localhost:3000/about支持，服务器以为要访问根路劲下的about目录的HTML文件，而不是访问根路劲下的HTML文件

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      name: "Home",
      component: () => import("@/views/home/HomeIndex.vue"),
    },
    {
      path: "/about",
      name: "About",
      component: () => import("@/views/About.vue"),
    },
  ],
}
)

export default router

---

APP中注册Router

import { createApp } from 'vue'
import App from './App.vue'

// 引入插件
import router from "@/store/index";
// 安装router插件
createApp(App).use(router).mount('#app')

---

传参

params

1.需要路由里面先占位

2.取数据

3.注意点：使用params传参时必须使用name跳转，不能使用path

import { useRoute } from "vue-router";
const route = useRoute()
//数据
console.log(route.params);

另外的

如果在路由配置中添加props:true，则组件setup里可以使用

defineProps(["age"，"name"])

直接接收组件传过来的参数

---

query

同上

import { useRoute } from "vue-router";
const route = useRoute()
//数据
console.log(route.query);

单独的

如果想使用props来接收query参数的话，不能简单的配置props:true

需要在路由规则中改写为函数形式

{
      path: "/about",
      name: "About",
      component: () => import("@/views/About.vue"),
      children: [
        {
          path: "/about/hello",
          name: "About",
          component: () => import("@/views/About.vue"),
          props(props){
            return props.query
          }
        },
      ],
    },

---

跳转

import { useRouter } from "vue-router";
const router = useRouter()
router.push({
	name:"/index",
	params:{
	id,
	name,
	age
	}
})