html中怎么使用vue-router实现返回主页
时间: 2024-05-14 10:11:56 浏览: 112
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
1. 首先需要引入Vue和Vue Router:
```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
```
2. 创建一个Vue实例和路由对象:
```js
var router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
var app = new Vue({
router: router
}).$mount('#app')
```
其中,`routes`属性是一个数组,用来配置路由,每个路由对象包含一个`path`和对应的组件。
3. 在HTML中使用`<router-link>`来实现导航:
```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
其中,`to`属性指定要跳转的路由路径。
4. 在组件中,可以使用`$router`来实现编程式导航:
```js
this.$router.push('/')
```
这样就可以实现返回主页的功能了。
阅读全文