vue-router 跳转页面
时间: 2023-09-12 14:03:01 浏览: 56
在 Vue.js 中,可以使用 `vue-router` 来实现前端路由,通过路由来跳转页面。
首先,需要在 `main.js` 中引入 `vue-router`:
```javascript
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
然后,在 `router` 文件夹下新建一个路由文件 `index.js`,在该文件中定义路由:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
```
上述代码中,我们定义了两个路由,一个是根路径 `/` 对应的组件是 `Home`,另一个是 `/about` 对应的组件是 `About`。
在组件中可以使用 `router-link` 标签来跳转到其他页面:
```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
也可以在 JavaScript 中使用 `$router.push()` 方法来实现页面跳转:
```javascript
this.$router.push('/') // 跳转到根路径
this.$router.push('/about') // 跳转到 /about 路径
```