英文:
Vue router doesn't load with create-vue@3
问题
Here's the translated content:
我正在尝试使用Vue Router，但没有得到预期的结果。
我正在按照https://router.vuejs.org/guide/教程中的步骤进行操作，如果我使用CDN并将其放在唯一的HTML文件中，它可以工作，但如果我尝试以下方式则不行：
复现步骤：
- 运行
npm create vue@3 - 配置：
- 项目名称：... vue-project
- 添加TypeScript？是
- 添加JSX支持？是
- 为单页应用程序开发添加Vue Router？是
- 添加Pinia进行状态管理？... 否
- 添加Vitest进行单元测试？... 否
- 添加端到端测试解决方案？› 否
- 添加ESLint进行代码质量？... 否
- 安装所有依赖项
- 将
src/main.ts更改为
import * as Vue from 'vue'
import * as VueRouter from 'vue-router'
// 1. 定义路由组件。
// 这些可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. 定义一些路由
// 每个路由应映射到一个组件。
// 我们将在后面讨论嵌套路由。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. 创建路由器实例并传递`routes`选项
// 您可以在这里传递其他选项，但现在让我们保持简单。
const router = VueRouter.createRouter({
// 4. 提供要使用的历史实现。我们在这里出于简单起见使用哈希历史。
history: VueRouter.createWebHashHistory(),
routes, // 简写为 `routes: routes`
})
// 5. 创建并挂载根实例。
const app = Vue.createApp({})
// 确保 _使用_ 路由器实例使整个应用程序具有路由器功能。
app.use(router)
app.mount('#app')
- 将
index.html更改为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用router-link组件进行导航。 -->
<!-- 通过传递`to`属性来指定链接。 -->
<!-- `<router-link>`将使用正确的`href`属性呈现`<a>`标签 -->
<router-link to="/">转到主页</router-link>
<router-link to="/about">转到关于</router-link>
</p>
<!-- 路由出口 -->
<!-- 与路由匹配的组件将在此处呈现 -->
<router-view></router-view>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
- 运行 `yarn start`
Vue和vue-router版本：
"dependencies": {
"vue": "^3.3.2",
"vue-router": "^4.2.0"
},
英文:
i was trying out the vue router but i'm not getting the expected result.
I'm following the https://router.vuejs.org/guide/ tutorial, if i use the CDN and put it in a unique HTML file it works, but if i try in this way it doesn´t:
Steps to reproduce:
- run
npm create vue@3 - Configuration:
- Project name: … vue-project
- Add TypeScript? Yes
- Add JSX Support? Yes
- Add Vue Router for Single Page Application development? Yes
- Add Pinia for state management? … No
- Add Vitest for Unit Testing? … No
- Add an End-to-End Testing Solution? › No
- Add ESLint for code quality? … No
- install all dependencies
- Change
src/main.tsto
import * as Vue from 'vue'
import * as VueRouter from 'vue-router'
// 1. Define route components.
// These can be imported from other files
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
// { path: '/smm', component: About },
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
- Change
index.htmlto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use the router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
- run `yarn start`
Vue and vue-router versions:
"dependencies": {
"vue": "^3.3.2",
"vue-router": "^4.2.0"
},
答案1
得分: 1
Vue应该被注入到index.html中。将所有内容移到<div id="app">内，并放入一个.vue SFC文件。
index.html
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
App.vue
<template>
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<router-view></router-view>
</template>
<script setup></script>
然后，在main.ts中导入这个组件，并将其设置为根组件使用createApp()。
main.ts
import App from './App.vue'
import { createApp } from 'vue'
.
.
.
const app = createApp(App)
app.use(router)
app.mount('#app')
英文:
Vue should be injected into index.html. Move everything inside the <div id="app"> into a .vue SFC file
index.html
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
App.vue
<template>
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<router-view></router-view>
</template>
<script setup></script>
then import this component into main.ts and set it as the root component with createApp()
main.ts
import App from './App.vue'
import { createApp } from 'vue'
.
.
.
const app = createApp(App)
app.use(router)
app.mount('#app')
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论