vue router 跳转页面怎么做
时间: 2023-10-24 10:15:41 浏览: 46
要使用 Vue Router 跳转页面,需要进行以下步骤:
1. 安装 Vue Router
```
npm install vue-router
```
2. 在 main.js 中引入 Vue Router
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
3. 创建路由实例
```javascript
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
```
4. 在 Vue 根实例中挂载路由
```javascript
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
5. 在组件中使用 `router-link` 进行页面跳转
```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
6. 在组件中使用 `router.push` 进行编程式跳转
```javascript
// 在方法中
this.$router.push('/about')
// 在事件中
<button @click="$router.push('/about')">Go to About</button>
```
以上就是使用 Vue Router 跳转页面的基本步骤。