VUE3.0基础——(安装、定义数据、路由跳转)

本文链接：https://blog.csdn.net/HarryHY/article/details/121056514

安装

//查询当前vue cli版本
vue --version
//安装 vue cli 
//由于我这边是npm 还有yarn版本的 可以自行去官网查看安装教程 下面会放
npm install -g @vue/cli
//由于我之前的是2.4.5版本的 所以需要升级一下
npm update -g @vue/cli

查看vue -V 出现了 ‘vue’ 不是内部或外部命令,也不是可运行的程序

//使用 git bash 安装 然后在查看版本
npm install -g @vue/cli

效果如下

C:\Users\10507>vue -V
@vue/cli 4.5.15

官网地址
https://cli.vuejs.org/zh/guide/installation.html
vue3.0+ts 启动时报错
Cannot find module ‘fork-ts-checker-webpack-plugin-v5’
这个是解决方法
https://blog.csdn.net/HarryHY/article/details/121059338

定义数据路由的跳转

<template lang="">
    <div class='header_box'>
        <div 
        v-for="(item) in HeaderList" 
        :key="item.id" @click="changePerson(item)" 
        :class="['headerdiv ',item.id==personSelected?'headerclick':'']"
        >
            {{item.name}}
        </div>
    </div>
</template>

<script lang= 'ts'>
import { reactive, toRefs} from "vue";
import { useRouter, onBeforeRouteUpdate } from "vue-router";
interface dataListReg {//头部接口规定
  HeaderList: any[];
  personSelected: number;
  changePerson: (item: any) => void;
}
export default {
  setup() {
    const router = useRouter();
    const dataList: dataListReg = reactive({
      HeaderList: [
        //头部的数据
        {
          id: 1,
          name: "首页",
          path: "/",
        },
        {
          id: 2,
          name: "个人中心",
          path: "/user",
        },
      ],
      personSelected: 1, //当前选中的页面

      changePerson: (item: any) => {
        //切换当前选中的页面
        dataList.personSelected = item.id; //切换头部高亮
        router.push({
          //跳转路由
          path: item.path,
        });
      },
    });
   
    const DataListRef = toRefs(dataList);
    return {
      ...DataListRef,
    };
  },
};
</script>

<style lang="less" scoped>
.header_box {
  display: flex;
  align-items: center;
  width: 80%;
  height: 50px;
  line-height: 50px;
  background-color: #0093e9;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
  padding: 0 10%;
  .headerdiv {
    color: #fff;
    min-width: 100px;
    text-align: center;
    border-radius: 5px;
    margin-right: 30px;
    cursor: pointer;
  }
  .headerclick {
    background-color: #96c24e;
  }
}
</style>

获取当前路由切换高亮

    const getRouter = reactive({
      getRouterChangePersonSelected: () => {//切换header高亮
        switch (router.currentRoute.value.path) {//当前路由地址
          case "/":
            dataList.personSelected = 1;
            break;
          case "/user":
            dataList.personSelected = 2;
            break;
        }
      },
    });
    getRouter.getRouterChangePersonSelected();

全部的TS代码

  setup() {
    const router = useRouter();
    const dataList: dataListReg = reactive({
      HeaderList: [
        //头部的数据
        {
          id: 1,
          name: "首页",
          path: "/",
        },
        {
          id: 2,
          name: "个人中心",
          path: "/user",
        },
      ],
      personSelected: 1, //当前选中的页面

      changePerson: (item: any) => {
        //切换当前选中的页面
        dataList.personSelected = item.id; //切换头部高亮
        router.push({
          //跳转路由
          path: item.path,
        });
      },
    });
    const getRouter = reactive({
      getRouterChangePersonSelected: () => {//切换header高亮
        switch (router.currentRoute.value.path) {//当前路由地址
          case "/":
            dataList.personSelected = 1;
            break;
          case "/user":
            dataList.personSelected = 2;
            break;
        }
      },
    });
    getRouter.getRouterChangePersonSelected();
    const DataListRef = toRefs(dataList);
    return {
      ...DataListRef,
    };
  },