vue怎么添加一个简单的页面路由跳转
时间: 2023-07-31 11:09:24 浏览: 50
要在Vue中添加一个简单的页面路由跳转,需要使用Vue Router。以下是一些基本步骤:
1. 安装Vue Router:在终端中运行以下命令
```
npm install vue-router --save
```
2. 导入Vue Router:在main.js中导入Vue Router
```javascript
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
3. 创建路由:在router目录下创建一个index.js文件,并编写代码来定义路由
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
```
4. 使用路由:在App.vue中使用路由
```html
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
```
这里,`<router-link>` 元素表示路由链接。 `to` 属性指定要跳转的路径。 `<router-view>` 元素用于渲染组件,该组件与当前路由匹配。
这就是一个简单的页面路由跳转的基本步骤。