在vue中使用路由器视图组件的教程

有时候，在开发的时候，我们会遇到点击这个链接跳转到其他组件的情况。氮气，我们不想跳转到新的页面，只切换当前页面的显示，这会涉及到路线的嵌套，或者子路线的使用。

例如，我们在一个导航组件中编写了三个导航链接，它们的地址是：/food，/rating，/seller。点击每个导航链接将跳转到不同的组件。我们使用路由器视图/路由器视图。

模板div class=' navbar ' ul id=' main ' lir outer-link to='/food ' commodity/router-link/Li lir outer-link to='/rating ' evaluation/router-link/Li lir outer-link to='/seller ' merchant/router-link/Li-路由匹配的组件将在此呈现-router-view/router-view/div/模板显示大致的nav bar是这样的。它显示在同一页上，地址栏也发生了变化。我们在索引组件中引入了navbar组件，头部那些不相关的logo可以忽略。

那么他们的路线如何匹配呢？在index.js中：

{ path: '/'，name: 'index '，component: index，redirect : '/' food '，children:[ { path: 'food '，name: 'food '，component: ' food ' }，{ path: '卖家'，Component : '卖家' }，{ path 3: '评级'，name 33: '评级'，component3360评级

上图标注的词是错的，是“index”，不是“iindex”，末尾附上了index.vue的代码，这样更容易理解

模板div class=' index ' div class=' nav '/div class=' shop-header ' div class=' imgbox ' img src=' http :/./static/img/56 . jpg ' alt=' '//Div H2黄蜀莱鸡煲Span Class=' ICO '/Span/H2 P Class=' INFO 1 ' Span * 4.6/spanspan月销738/spanspan商户送货约需44分钟/Span Span距离为345米/Span/P Class=' INFO 2 '店内免费火锅(蔬菜、小料、主食、蛋糕)！外卖饭，请自己点！商家会看评价问题，可能不会及时回复。如果您有任何问题，请参考18232966036/p/div nav bar/nav bar/div/templatestimport nav bar from ' @/components/nav bar ' import food from ' @/components/food ' export default { name : ' hello world }，data() { return { msg:[] }，components 3360 { nav bar } }/script！-添加“作用域”属性，将CSS限制为此组件-样式lang=“手写笔”@import././static/CSS/index . styl '；/style

摘要

以上是边肖介绍的在vue中使用路由器视图组件的教程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！