[vue3] Vue-Router（路由）使用

 ✨✨个人主页:沫洺的主页

📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 

                           📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

                           📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏     

💖💖如果文章对你有所帮助请留下三连✨✨

🧊Vue-Router使用

🎫由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

💎安装

🎈 npm install vue-router@4

💎创建组件

📌在src文件夹下新建一个views文件夹,views中创建一个poduct文件夹和Home.vue,poduct文件夹中创建Index.vue和List.vue

📌Home.vue

<template>
    主页
</template>
<script setup lang="ts">

</script>

📌Index.vue

<template>
    <fieldset>
        <legend>商品父页</legend>
        <router-view></router-view>
    </fieldset>

</template>
<script setup lang="ts">

</script>

📌List.vue

<template>
    商品列表子页
</template>
<script setup lang="ts">

</script>

💎添加路由

📌src文件夹下新建router文件夹，router中新建文件 index.ts

import { createRouter, createWebHistory } from "vue-router";
const routes = [
    {
        path: '/home',
        component: () => import("../views/Home.vue")
    },
    {
        path: '/poduct',
        component: () => import("../views/poduct/Index.vue"),
        children: [
            {
                path: '/poduct/list',
                component: () => import("../views/poduct/List.vue"),
            }
        ]
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

💎在main.ts文件加入路由

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

//加入路由
import router from './router/index';
//并通过use，使用路由
createApp(App).use(router).mount('#app')

💎在App.vue 添加导航，并使用router-view

<template>
 <router-link to="/home">首页</router-link><br />
  <router-link to="/poduct/list">商品列表</router-link>
  <hr />
  <router-view></router-view>
</template>
<script setup lang="ts">

</script>

💎查看效果

 📌可以实现类似于当前窗口的页面跳转

🧊自定义端口号,使用@别名

💎安装

 📌npm install @types/node --save-dev

💎配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5000, // 你需要定义的端口号
  },
 resolve: {
  // 配置路径别名
  alias: {
    '@': path.resolve(__dirname, './src'),
  }
},
})

💎解决标红波浪

如果提示有标红波浪,在tsconfig.json 添加如下代码.

 "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }

💎效果