【router-view】切换组件 深刻理解用法 vue的设计思想

之前学的时候没学明白,导致写项目有些功能的实现上走了歪路。

今天询问了学长,更加深刻的理解的Vue的设计思想。

因为vue是单页面应用,所以学会用router-view来切换频繁变化的地方的组件是非常重要的。

之前,我的一个主页组件由三个子组件构成,简单来讲就像这样:

我的整个项目界面的top和foot是不需要改变的,而body的内容会频繁改变。

我想要在在不同的body组件(即相对于我的main组件来说它的内组件)中进行一些点击操作时更换外部main组件的body部分。

比如我在最开始的body组件中进行了搜索,我就希望搜索按钮点击之后,把body部分换成搜索结果页面的组件。

我一开始的方法是 监听+emit改变外组件的值(我改变的就是body处使用的组件的名字)

当只有一个页面更换时感觉还可以,但其实是比较复杂的。

main组件的组成

     

main组件监听子组件调用方法

        ( 内外组件调用该方法名字必须一致)

子组件点击按钮触发

 

子组件点击事件,emit调用父组件方法

 是可以实现在子组件内部改变外部组件的值,从而更换body处的组件的。

但是仔细想想会发现这非常麻烦。

一开始我也用的没问题,但后来第二个子组件部分需要用到该方法更换组件时,问题就出现了。

我在top组件中,即顶部导航,想要点击网站名称时,body处换位最初的body组件。

一模一样的监听+emit方法,可是在top中就是不响应。

问了学长,说是该方法只能进行第一次更换,后续其他地方继续调用就无法更新了。

并且建议我这里可以直接使用router-view + push的方法切换组件。

这样子才体现了vue的优秀之处。

router-view的响应完全依赖于router的配置,只要配置清楚了,将会十分方便简洁。

弄懂了这点之后非常好改。

只需要在main组件的router声明中,设置children属性,列举后续需要替换到该main组件中<router-view></router-view>处的组件的路径即可。然后就可以直接在声明了的子组件中直接通过this.$router.push({path:'/{{已配置子路径}}'}) 即可。

实际操作展示:

router声明

其中redirect是重定向,在此处声明意思是初始时默认router-view处使用body组件。     

原本复杂的更换方式直接用router-view替换

 

被声明的子组件直接push替换router-view

 

同理

 

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue RouterVue.js 的官方路由管理器,它与 Vue.js 紧密集成,可以让我们轻松地构建单页面应用(SPA)。 在使用 Vue Router 构建单页面应用时,我们通常会使用 `<router-view>` 组件来展示当前路由所对应的组件内容。下面是对 `<router-view>` 组件的使用详解: 1. 定义路由: 在 Vue Router 中,我们需要首先定义路由。可以通过在 `routes` 配置项中定义一个数组来实现,每个路由对象都包含了一个路径和对应的组件。例如: ```javascript import Home from './components/Home.vue' import About from './components/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] ``` 2. 注册路由: 在创建 Vue 实例之前,我们需要将路由配置注册到 Vue 实例中。可以使用 `Vue.use()` 方法来注册 Vue Router 插件。例如: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 3. 创建路由实例: 在注册完插件后,我们可以创建一个路由实例,并将之前定义的路由配置传入。例如: ```javascript const router = new VueRouter({ routes }) ``` 4. 添加路由占位符: 在应用的根组件中,我们需要添加一个 `<router-view>` 组件作为路由占位符。这样,当路由切换时,对应的组件就会渲染在这个占位符中。例如: ```html <template> <div> <router-view></router-view> </div> </template> ``` 注意,`<router-view>` 组件可以放置在任何位置,根据实际需求进行布局。 5. 挂载路由: 最后一步是将路由实例挂载到 Vue 实例上。例如: ```javascript new Vue({ router }).$mount('#app') ``` 至此,我们就完成了 `<router-view>` 组件的使用。当用户访问不同的路由时,对应的组件就会被渲染到 `<router-view>` 中,实现了页面的切换效果。 需要注意的是,`<router-view>` 组件只能用于展示路由对应的组件内容,并不能直接显示其他内容。如果需要在路由切换时显示一些其他元素,可以结合使用 `<router-link>` 组件来实现。 希望以上解答对你有帮助!如有其他问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值