带有 vue-router 和 CDN 的 VueJS 3 路由
Posted
技术标签:
【中文标题】带有 vue-router 和 CDN 的 VueJS 3 路由【英文标题】：VueJS 3 routing with vue-router and CDN 【发布时间】：2021-11-09 19:26:28 【问题描述】：过去三个小时左右，我一直在尝试将 VueJS 2 + vue-router + CDN 项目 转换为 VueJS 3。到目前为止，我还无法使其工作。 VueJS 2 版本运行良好。 VueJS 3 版本是行不通的。我知道项目迟早需要使用 CLI 来实现，但我目前更愿意使用 CDN，因为我仍在试验中。
我收到的错误信息是：Uncaught ReferenceError: createRouter is not defined。在我的考验和磨难中，我接受了许多其他人。
这是 JS 部分（VueJS 2，工作正常）：
const Home = template: `<h1>Contenuto Home</h1>` ;
const About = template: `<h1>Contenuto About</h1>` ;
const Portfolio = template: `<h1>Contenuto Portfolio</h1>` ;
const Contatti = template: `<h1>Contenuto Contatti</h1>` ;
const routes = [
path: "/", component: Home ,
path: "/about", component: About ,
path: "/portfolio", component: Portfolio ,
path: "/contatti", component: Contatti
];
const router = new VueRouter(
routes // short for `routes: routes`
);
const vm = new Vue (
router,
el: "#app",
data:
mess: "Ciao Mondo"
).$mount("#app");
html 看起来像这样（VueJS 2，工作正常）：
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Router</title>
</head>
<body>
<div id="app">
<h1> mess </h1>
<!-- i links -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/portfolio">Portfolio</router-link>
<router-link to="/contatti">Contatti</router-link>
<!-- contenitore per il HTML -->
<router-view></router-view>
</div>
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- vue-router -->
<script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>
<!-- custom JS -->
<script src="main.js"></script>
</body>
</html>
这是我尝试将此代码转换为 VueJS 3（不起作用 - Uncaught ReferenceError: createRouter is not defined）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
<h1> mess </h1>
<!-- i links -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/portfolio">Portfolio</router-link>
<router-link to="/contatti">Contatti</router-link>
<!-- contenitore per il HTML -->
<router-view></router-view>
</div>
<script>
let app = Vue.createApp(
data()
return
mess: "ciao mondo"
);
const Home = template: `<h1>Contenuto Home</h1>` ;
const About = template: `<h1>Contenuto About</h1>` ;
const Portfolio = template: `<h1>Contenuto Portfolio</h1>` ;
const Contatti = template: `<h1>Contenuto Contatti</h1>` ;
const routes = [
path: "/", component: Home ,
path: "/about", component: About ,
path: "/portfolio", component: Portfolio ,
path: "/contatti", component: Contatti
];
const router = new createRouter(
history: createWebHistory(process.env.BASE_URL),
routes // short for `routes: routes`
);
app.mount("#app");
</script>
</body>
</html>
【问题讨论】：
【参考方案1】： const app = Vue.createApp(
data()
return
mess: "ciao mondo"
);
const Home = template: `<h1>Contenuto Home</h1>` ;
const About = template: `<h1>Contenuto About</h1>` ;
const Portfolio = template: `<h1>Contenuto Portfolio</h1>` ;
const Contatti = template: `<h1>Contenuto Contatti</h1>` ;
const routes = [
path: "/", component: Home ,
path: "/about", component: About ,
path: "/portfolio", component: Portfolio ,
path: "/contatti", component: Contatti
];
const router = VueRouter.createRouter(
history: VueRouter.createWebHashHistory(),
routes
)
app.use(router)
app.mount('#app')
【讨论】：
谢谢你，维塔利。我会将您的答案标记为已接受，但您能否先删除第 24 行的内容（底部第四行的字符“）”），因为它会导致错误并且没有它可以完美运行（这会关闭一些没有打开）？ 是的，错了。更新以上是关于带有 vue-router 和 CDN 的 VueJS 3 路由的主要内容，如果未能解决你的问题，请参考以下文章