vue router-view 调用方法
时间: 2023-09-25 16:09:05 浏览: 57
vue的<router-view>指令用于在页面上显示当前路由所对应的组件内容。在vue-router中,我们通过配置路由表来定义页面的路径和对应的组件,而<router-view>则负责根据当前路由的路径匹配相应的组件并将其渲染到页面上。
使用<router-view>的方法如下:
1. 在需要显示路由组件的地方添加<router-view>标签,通常是在父组件的模板中。
2. 确保已经正确配置了vue-router,并在入口文件中引入并使用vue-router插件。
3. 在路由配置文件(router.js)中,定义路由表,包括路径和对应的组件。
4. 在Vue实例中,通过挂载路由表的方式将路由配置生效。
示例代码如下:
在模板中添加<router-view>:
```
<div>
<router-view></router-view>
</div>
```
在路由配置文件(router.js)中定义路由表:
```
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
// more routes...
]
})
```
在入口文件(main.js)中使用vue-router插件:
```
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```