vue同一个路由页面切换
时间: 2023-09-13 15:07:25 浏览: 55
在Vue.js中,可以使用Vue Router来实现同一个路由页面的切换。Vue Router是Vue.js官方提供的路由管理器,用于实现单页面应用(SPA)中的路由功能。
首先,需要安装和引入Vue Router。可以使用npm或者yarn来安装Vue Router,然后在项目中引入它。
安装命令:
```
npm install vue-router
```
在Vue项目中引入Vue Router:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
接下来,创建一个路由实例,并定义路由配置。在配置中,需要指定每个路由对应的组件。
```javascript
const router = new VueRouter({
routes: [
{
path: '/page1',
component: Page1Component
},
{
path: '/page2',
component: Page2Component
},
// 其他路由配置...
]
})
```
在上述代码中,`Page1Component`和`Page2Component`是两个组件,分别对应不同的页面。
最后,在Vue实例中使用路由实例:
```javascript
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
在模板中,可以使用`<router-link>`组件来实现页面切换的导航。例如:
```html
<router-link to="/page1">Page 1</router-link>
<router-link to="/page2">Page 2</router-link>
`