vue3,vue-router4

  • 1、在组合式API中无法访问routerrouter、route
const $router = useRouter();
const $route = useRoute();
$router.push({ path: '/' })
  • 2、vite2配置别名alias失效
    修改根目录下的tsconfig.json中的paths
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/plugins/index.ts"]
}
  • 3、setup()中使用computed计算时,使用ref响应时,需要属性.value
const siderFixed = computed(() => {
    return collapsed.value ? 'fold' : 'open'
})
  • 3、vue3侧边栏,嵌套路由使用RouterView
import {RouterView} from "vue-router";
export default [
    {
        path: "/import-permits",
        component: RouterView,
        children: [
            {
                path: "applications",
                component: RouterView,
                children: [
                    {
                        path: "list",
                        name: "list",
                        component: ViewIPApplicationsList
                    }
                ]
            }
        ]
    }
]