<!DOCTYPE html>
<html>
<head>
<title>Vue Router CDN Example</title>
<script src="https://unpkg.com/vue@3.2.20/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.12/dist/vue-router.global.js"></script>
</head>
<style>
a{
text-decoration: none;
margin-left: 200px;
}
</style>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
<script>
const { createApp, createRouter } = VueRouter;
// 定义组件
const Home = { template: '<div>111111111</div>' };
const About = { template: '<div>22222222</div>' };
// 创建路由实例
const router = createRouter({
history: VueRouter.createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});
// 创建 Vue 应用程序
const app =Vue.createApp({});
app.use(router);
app.mount('#app');
</script>
</body>
</html>
1.创建一个路由实例（对象）createRouter（）
2.创建要跳转结束的相关组件
3.在开始跳转的组件设置a标签（<router-link></routert-link>）
4.在路由实例中配置router-link标签对应跳转的组件
扫一扫
2815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
