VueRouter4 路由

import { createRouter, createWebHistory } from 'vue-router'
// createRouter 创建路由实例
// 配置 history 模式
// 1. history模式：createWebHistory     地址栏不带 #
// 2. hash模式：   createWebHashHistory 地址栏带 #
// console.log(import.meta.env.DEV)

// vite 中的环境变量 import.meta.env.BASE_URL  就是 vite.config.js 中的 base 配置项
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      // 登录页面
      path: '/login',
      component: () => import('@/views/login/index.vue')
    },
    {
      //访问错误页面
      path: '/:pathMatch(.*)',
      component: () => import('@/views/erro/index.vue')
    },
　　//动态路由传参（params）
　　{path:'/index/:id',name:'index',component: () => import('@/views/index.vue')
　　}
    //app.vue------------------------------------------------------
    //<router-link :to="{name:'user',params{id:1}}">User</router-link> 
    //index.vue
    //<h3>⽤户⻚⾯{{$route.params.id}}</h3>
　　//查询参数传参
　　{path:'/query',name:'query',component:()=>import('@/components/HelloQuery.vue')}
　　//index.vue
　　<router-link :to="{name:'query',query:{id:32,titel:'这是一些文字'}}">query传值</router-link>
　　//模板
      　　<h1>{{$route.query.id}}</h1>
　　<script setup>
  　　  console.log(this.$route.query.titel);
　　</script>


    {
      path: '/', //二级路由
      component: () => import('@/views/layout/LayoutContainer.vue'),
      redirect: '/dishes/manage',
      children: [
        {
          path: '/dishes/manage', 
          component: () => import('@/views/dishes/Manage.vue')
        },
        {
          path: '/order/manage', 
          component: () => import('@/views/order/Manage.vue')
        },
        {
          path: '/user/avatar', 
          component: () => import('@/views/user/UserAvatar.vue')
        },
        {
          path: '/user/password', 
          component: () => import('@/views/user/UserPassword.vue')
        },
        {
          path: '/user/profile', 
          component: () => import('@/views/user/UserProfile.vue')
        }
      ]
    }
  ]
})


export default router//这里一定要导出
-------------------------------------------------------------------------------------
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'//导入路由文件

createApp(App).use(router).mount('#app')//配置到全局
 

 
Ps：import.meta.env.BASE_URL 是Vite 环境变量：https://cn.vitejs.dev/guide/env-and-mode.html