请具体返回示例代码
时间: 2023-07-28 10:10:14 浏览: 26
好的,以下是一个简单的示例代码,演示如何通过CDN引入Vue和Vue-router,并使用Vue-router实现路由跳转和展示。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Router with CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router"></script>
</head>
<body>
<div id="app">
<h1>Vue Router with CDN</h1>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
</ul>
<router-view></router-view>
</div>
<script>
// 定义组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 定义路由
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
// 创建 Vue Router 实例
const router = new VueRouter({
routes
})
// 创建 Vue 实例
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
```
在这个示例中,我们首先在HTML文件中引入了Vue和Vue-router的CDN链接。然后定义了两个组件Home和About,以及两个路由/和/about。在Vue实例中,我们将Vue-router实例传入Vue实例中,并将其挂载到了id为"app"的div上。在页面中,我们使用`<router-link>`标签来实现路由跳转,使用`<router-view>`标签来展示当前路由对应的组件。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)