如何在html项目中实现Vue路由
时间: 2024-01-22 14:20:55 浏览: 30
要在HTML项目中实现Vue路由,需要遵循以下步骤:
1. 引入Vue.js和Vue Router库。
```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
```
2. 创建Vue实例,并在其中注册Vue Router。
```javascript
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
const app = new Vue({
router
}).$mount('#app')
```
3. 定义路由组件。
```javascript
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
```
4. 在模板中使用`<router-link>`和`<router-view>`标记。
```html
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
```
这样就可以在HTML项目中实现Vue路由了。