Vue3路由1.1【路由】路由：路径和组件的映射关系作用：实现单页面应用程序的页面切换安装 npm install

1.1【路由】

路由：路径和组件的映射关系
作用：实现单页面应用程序的页面切换

安装 npm install vue-router
路由配置文件代码如下：

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/pages/Home.vue";
import Feeds from "@/pages/Feeds.vue";
import Detail from "@/pages/Feeds/Detail.vue";
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
      name: "feeds",
      path: "/feeds",
      component: Feeds,
      children: [
        {
          name: "feeds_detail",
          path: "detail/:dId/:scene?",
          component: Detail,
        },
      ],
    },
  ],
});
export default router;

main.ts代码如下：

import router from "./router/index";
app.use(router);
app.mount("#app");

App.vue代码如下

<template>
  <div class="app">
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { RouterLink, RouterView } from "vue-router";
</script>

1.2 【两个注意点】

路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。

通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

1.3【路由器工作模式】

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

缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。
```
const router = createRouter({
  history: createWebHistory(), //history模式
  /******/
});
```
hash模式
优点：兼容性更好，因为不需要服务器端处理路径。

缺点：URL带有#不太美观，且在SEO优化方面相对较差。
```
const router = createRouter({
  history: createWebHashHistory(), //hash模式
  /******/
});
```

1.4【重定向】

作用：将特定的路径，重新定向到已有路由
```
{
   path:'/',
   redirect:'/home'
}
```

1.5【路由传参】

query 参数

传递参数

<!-- 声明式路由导航跳转并携带query参数=>to的字符串写法 -->
<RouterLink :to="`/feeds/detail/?dId=${dId}&scene=${scene}`">
   跳转
 </RouterLink>
<!--to的对象写法-->
<RouterLink
  :to="{
    //name:'feeds_detail', //用name也可以跳转
    path: '/feeds/detail/',
    query: {
      dId: item.dId,
      scene: item.scene,
    },
  }"
>跳转</RouterLink>

接收参数

import { useRoute } from "vue-router";
const route = useRoute();
// 解构query参数
const { query } = toRefs(route);

params 参数

传递参数

<!-- 声明式路由导航跳转并携带params参数=>to的字符串写法 -->
<RouterLink :to="`/feeds/detail/${dId}/${scene}`">
   跳转
</RouterLink>
<!--to的对象写法-->
<RouterLink
  :to="{
    name: 'feeds_detail', //只能用name配置项跳转，不能用path
    params: {
      dId: item.dId,
      scene: item.scene,
    },
  }"
>跳转</RouterLink>

params 参数在配置路由的时候必须占位

  {
      name:'feeds',
      path:'/feeds',
      component:News,
      children:[
        {
         name: 'feeds_detail',
         path:'detail/:dId/:scene?',
         component:Detail,
        }
      ]
    },

接收参数

import { useRoute } from "vue-router";
const route = useRoute();
// 解构query参数
const { params } = toRefs(route);

1.6 【路由的 props 配置】

作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

{
  name:'feeds',
  path:'/feeds',
  component:News,
  children:[
    {
      name: 'feeds_detail',
      path:'detail/:dId/:scene?',
      component:Detail,
      // props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
      // props:{a:1,b:2,c:3},
      // props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
      // props:true
      // props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
      props(route){
        return route.query
      }
    }
  ]
},

defineProps(["dId", "scene"]); // 路由组件接收

1.7 【replace 属性】

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace
- push是追加历史记录(默认值)
- replace是替换当前记录

声明式导航开启replace模式：

<RouterLink replace to="/feeds/detail">跳转</RouterLink>

1.8【编程式路由导航】

路由组件的两个重要的属性：$route和$router变成了两个hooks

import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
console.log(route.query);
console.log(route.parmas);
router.push({
  name: "feeds_detail",
  params: {
    dId,
    scene,
  },
});