router-link与router-view的对应关系和映射特点

router-link对应的router-view规律为:
1.根据to的值而定,值为一层(如 /child)则对应app.vue中的router-view;
 值为两层,如 /second/child,则对应的是/second组件中的router-view;以此类推
2.router-link映射的结果为其对应组件的整个页面内容,如 to='/second/child',则其对应的view会显示app.vue和/second和/second/child等父子组件的整个页面内容;
  同样的,若to='/child',则得到的页面结果为app.vue和/child父子组件的整个页面

转载于:https://www.cnblogs.com/zhcBlog/p/9917707.html

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`router-link` 和 `router-view` 是 Vue.js 中用于实现路由功能的两个关键组件。 `router-link` 组件用于生成一个可点击的链接,当点击这个链接时,会触发路由跳转。该组件通常用于生成导航菜单或者跳转链接。 `router-view` 组件用于根据当前路由状态动态渲染匹配的组件。当 URL 发生变化时,`router-view` 会根据当前的路由状态自动渲染对应的组件。 下面是一个简单的使用示例: ```html <!-- App.vue --> <template> <div> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> ``` 在上面的代码中,我们首先定义了两个 `router-link` 组件,分别对应 Home 和 About 两个页面。然后,在 `router-view` 组件中,我们将当前路由状态对应的组件渲染出来。这里的组件是通过 Vue Router 配置文件中的路由映射关系自动匹配的。 需要注意的是,使用 `router-link` 组件时,需要将 `to` 属性指定为要跳转的 URL 路径;而在 Vue Router 配置文件中,需要定义一个 `routes` 数组,其中每个元素表示一个路由映射关系,包括 `path` 和 `component` 两个属性。例如: ```js // router.js 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({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] }) ``` 在上面的示例中,我们首先通过 `import` 引入了要渲染的两个组件 `Home` 和 `About`,然后在 `routes` 数组中定义了两个路由映射关系,分别将 `/` 和 `/about` 路径映射对应的组件上。最后,通过 `export default` 导出一个 `Router` 实例,供应用程序使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值