router-view和router-link对应关系
时间: 2023-11-23 19:57:03 浏览: 177
router-view和router-link是Vue.js中用于实现路由功能的两个组件,它们之间的对应关系如下:
router-link用于生成页面中的链接,当用户点击链接时,会触发路由的跳转。router-link的to属性指定了链接的目标地址,可以是一个字符串或一个描述目标路由的对象。router-link还可以设置其他属性,例如class、style等。
router-view用于渲染当前路由对应的组件,当路由发生变化时,router-view会自动更新显示的组件。router-view可以设置name属性,用于渲染具有命名视图的路由。
下面是一个简单的示例,演示了如何使用router-link和router-view实现路由功能:
```html
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
```
```javascript
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
})
const app = new Vue({
router
}).$mount('#app')
```
在上面的示例中,router-link生成了两个链接,分别指向了"/home"和"/about"两个路由。router-view用于渲染当前路由对应的组件,当路由为"/home"时,渲染的是Home组件,当路由为"/about"时,渲染的是About组件。
阅读全文