vue3-hooks、路由、路由传参

hooks

import axios from 'axios';
let dogList = reactive([
  'https://images.dog.ceo/breeds/pembroke/n02113023_6140.jpg'
])
async function addDog() {
  try {
    let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
    console.log(result.data.message)
    dogList.push(result.data.message)
  } catch (error) {
    alert('获取狗狗图片失败，请稍后再试！');
  }
}

可以封装到useDog.ts

import axios from "axios";
import { reactive } from "vue";
export default function () {
  let dogList = reactive([
    "https://images.dog.ceo/breeds/pembroke/n02113023_6140.jpg",
  ]);
  async function addDog() {
    try {
      let result = await axios.get(
        "https://dog.ceo/api/breed/pembroke/images/random"
      );
      console.log(result.data.message);
      dogList.push(result.data.message);
    } catch (error) {
      alert("获取狗狗图片失败，请稍后再试！");
    }
  }
//钩子里面加钩子
  onMounted(() => {
    addDog();
  });
  return {
    dogList,
    addDog,
  };
}

在person.vue中引用

import useDog from "@/hooks/useDog";
const {dogList, addDog} = useDog();

路由

一组key-value的对应关系
route规则： /class=>班级组件

路由组件（靠路由的规则渲染出来的）一般放在pages、views文件夹；一般文件一般放在components文件夹
在router/index.ts中配置路由器

//创建一个路由器并 暴露出去
import { createRouter, createWebHashHistory } from "vue-router";
import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import About from "@/components/About.vue";
const router = createRouter({
  history: createWebHashHistory(), //路由器的工作模式
  routes: [
    { path: "/Home", component: Home },
    { path: "/News", component: News },
    { path: "/About", component: About },
  ],
});

export default router;

在main.ts中，将应用配置好路由环境

import router from "./router";
//创建应用实例并挂载到#app元素上
// createApp(App).mount("#app");
const app = createApp(App);
app.use(router); //使用路由器
//挂载整个router到应用
app.mount("#app");

将路由页面放置在指定位置App.vue中

import { RouterView, RouterLink } from "vue-router"; 

    <h2>Vue路由测试</h2>
    <div class="navigate">
      <RouterLink to="/home" active-class="xiaozhupeiqi">首页</RouterLink>  <--这里to要与配置的url路径一致-->
      <RouterLink to="/news">新闻</RouterLink>
      <RouterLink to="/about">关于</RouterLink>
    </div>
    <div class="content">
      <RouterView></RouterView>
    </div>

注意：在vue文件内部 <script setup lang='ts' name='home' 这里的name是组件内部的名字方便vue-dev调试使用的
而跳转的路径的组件名是在 import Home from '@/components/home'时定义好的组件名Home

• history模式
  vue3:createWebHistory
  URL更美观，不带有#；但后期项目上线服务器端需要处理路径问题，不然会出现404
• hash模式
  带有#，url不太美观，兼容性更好

路由传参

• query参数

从一个响应式对象身上直接解构属性，会让其失去响应式，所以需要使用toRefs
let {query}=toRefs(route) 无toRefs的话，query会失去响应式

 <!-- <RouterLink
          :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`"
          href="#"
          >{{ news.id }} - {{ news.title }}</RouterLink
        > -->
        <RouterLink
          :to="{
            path: '/news/detail', //name:'xiang',
            query: {
              id: news.id,
              title: news.title,
              content: news.content,
            },
          }"
          >{{ news.id }} - {{ news.title }}</RouterLink
        >

接收页面：

<script setup lang="ts" name="Detail">
import { useRoute } from "vue-router";
import { toRefs } from "vue";
let route = useRoute();
// console.log("@", route);
let { query } = toRefs(route);
</script>

• params参数
  需要在ts文件中占位传参时

const router = createRouter({
  history: createWebHashHistory(), //路由器的工作模式
  routes: [
    { name: "zhuye", path: "/home", component: Home },
    {
      name: "xinwen",
      path: "/News",
      component: News,
      children: [
        {
          name: "xiang",
          path: "detail/:id/:title/:content?",
          component: Detail,
        },
      ],
    },
    { name: "guanyu", path: "/About", component: About },
  ],
});

news.vue中传参

<!-- <RouterLink
          :to="`/news/detail/${news.id}/${news.title}/${news.content}`"
          >{{ news.title }}</RouterLink
        > -->
        <RouterLink
          :to="{       <--to参数的写法必须用name配置，不能用path
            name: 'xiang',
            params: {
              id: news.id,
              title: news.title,
              content: news.content,
            },
          }"
          >{{ news.title }}</RouterLink
        >

路由规则的props配置

{
      name: "xinwen",
      path: "/News",
      component: News,
      children: [
        {
          name: "xiang",
          path: "detail/:id/:title/:content?",
          component: Detail,
          props: true, //开启props传参 将所收到的所有props参数作为props传给路由组件
        },
      ],
    },

在Detail.vue中便可以直接使用id、title、content
defineProps(["id", "title", "content"]);

// props: true, //开启props传参 将所收到的所有props参数作为props传给路由组件
          //可以自定义函数决定什么作为props传递给路由组件
          // props(route) {
          //   return route.query;
          // },
          //对象写法、自己决定讲什么作为props作为路由传递
          props: {
            a: 10,
            b:20
          }

replace属性

replace模式：浏览页面不可回退到上一步
<RouterLink replace :to="{path:'/about'} >关于</RouterLink>"
push:则可以回退

编程式路由导航

脱离RouterLink实现路由跳转

import { onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
//在首页看3s自动跳转到news页面
onMounted(() => {
  setTimeout(() => {
    router.push("/news");
  }, 3000);
});

路由重定向

{ name: "guanyu", path: "/About", component: About },
    { path: "/", redirect: "/About" }, //重定向