vue.js - vue3、vite 和 vue-router@next,无法解析组件 router-view
问题描述
我使用 Vite 创建了一个项目并添加了 vue-router@next。我在 main.js 中使用路由器,因为我已经浏览过,似乎这是问题所在,但它不能解决我遇到的问题。
// package.json
{
"name": "rng-alpha",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5",
"vue-router": "^4.0.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.1.5",
"@vue/compiler-sfc": "^3.0.7",
"vite": "^2.0.5"
}
}
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/router';
const app = createApp(App);
app.use(router);
app.mount('#app');
// router.js
import {
createWebHistory,
createRouter
} from 'vue-router'
import Home from '../components/Home.vue'
const routes = [{
path: "/",
name: "Home",
component: Home
}]
const router = createRouter[{
history: createWebHistory,
routes,
}]
export default router
// App.vue
<template>
<div>
<div>hi</div>
<router-view />
</div>
</template>
如何使路由器视图工作?因为我现在无法使用它。
解决方案
createRouter
是一个应该使用()
not调用的方法[]
:
const router = createRouter({
history: createWebHistory,
routes,
})
推荐阅读
- php - php从数组中获取随机唯一值而不重复&也保留&获取密钥
- apache-spark - pyspark中的反向分组功能?
- sql - 选择期间不重叠的日期范围
- react-native - 有什么方法可以知道我是否使用 react-native 的 ScrollView 向右滚动?
- autofac - Autofac 性能调优
- go - Golang中的字节切片是二维数据结构吗
- javascript - Google App Script 通过 my-drive 生成指向 pdf 的可点击链接
- ios - 从 iOS 原生代码加载路由(objective-c)
- javascript - 为什么我的节点快速响应返回空?
- java - 带有自签名证书的 Flutter https