Vue的编程式路由导航怎么才能实现跳转不同的html文件,给出具体代码
时间: 2023-02-09 11:46:12 浏览: 65
Vue中使用编程式导航跳转不同的HTML文件需要在项目中配置路由,然后使用`this.$router.push`方法进行跳转。具体代码如下:
1. 在项目中配置路由,例如在`router.js`文件中:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})
```
2. 使用`this.$router.push`方法进行跳转,例如在组件中:
```javascript
methods: {
goToAbout() {
this.$router.push({ name: 'About' });
}
}
```
在上面的代码中,我们配置了两个路由,一个是根路径,对应的是Home组件,另一个是/about,对应的是About组件。通过在组件中调用goToAbout()方法就可以实现从当前页面跳转到About组件对应的页面。