router-view怎么使用
时间: 2023-11-09 19:01:06 浏览: 89
vue中的router-view组件的使用教程
router-view 是 Vue Router 提供的一个组件,用于渲染匹配到的路由组件。使用方法如下:
1. 在 Vue 组件中,使用 <router-view></router-view> 标签来渲染路由组件。
2. 在路由配置中,通过 path 属性来匹配路由,并通过 component 属性来指定对应的组件。
示例代码如下:
在 App.vue 中:
```
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
```
在路由配置中:
```
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
}
]
})
```
阅读全文