英文:
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 filesconst 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')
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论