vue2怎么添加一个简单的页面路由跳转
时间: 2024-01-21 13:18:40 浏览: 102
Vue页面跳转动画效果的实现方法
要在Vue2中添加页面路由跳转,你需要使用Vue Router。下面是一个简单的例子:
1. 首先,安装Vue Router
```
npm install vue-router --save
```
2. 在main.js中引入Vue Router并配置路由
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes // 简写 for `routes: routes`
})
new Vue({
router
}).$mount('#app')
```
3. 在App.vue中添加路由链接
```html
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
```
以上代码中,`<router-link>` 标签用于生成路由链接,`<router-view>` 标签用于渲染路由组件。
现在你可以运行你的Vue应用并点击链接进行页面路由跳转了。
阅读全文