网页设计怎么创建站点,编程怎么学,做与食品安全有关的网站,网站开发常见技术问题开发的时候有时候会遇到一种情况#xff0c;比如 #xff1a;点击这个链接跳转到其他组件的情况#xff0c;通常会跳转到新的页面#xff0c;蛋是#xff0c;我们不想跳转到新页面#xff0c;只在当前页面切换着显示#xff0c;那么就要涉及到路由的嵌套了#xff0c;也…开发的时候有时候会遇到一种情况比如 点击这个链接跳转到其他组件的情况通常会跳转到新的页面蛋是我们不想跳转到新页面只在当前页面切换着显示那么就要涉及到路由的嵌套了也可以说是子路由的使用。 以饿了么订餐的情景来说吧在同个页面切换显示不同组件的相应内容同时地址栏的地址是会变的 怎么实现它呢
首先 我们在导航组件navbar.vue中写了三个导航链接他们对应地址分别为/food,/rating,/seller,点击每个导航链接会跳转到不同的组件并且加上router-view/router-view这个标签 navbar.vue
templatediv classnavbarul idmainlirouter-link to/food 商品/router-link/lilirouter-link to/rating评价/router-link/lilirouter-link to/seller商家/router-link/li/ul!-- 路由匹配到的组件将显示在这里 --router-view/router-view/div
/template然后我们在index.vue引入navbar.vue index.vue templatediv classindexdiv classnav/divdiv classshop-headerdiv classimgboximg src../../static/img/56.jpg alt //divh2黄蜀郞鸡公煲span classico/span/h2p classinfo1span*4.6/spanspan月售738/spanspan商家配送约44分钟/spanspan距离345m/span/pp classinfo2店内免费涮煲蔬菜、小料、主食、糕点、凉菜、水果、免费吃闻香识辣入口知麻一锅两吃独具特色外卖米饭请自点评价问题商家会一一看可能不能及时回复。有问题详询18232966036/p/div!--在这里引入navbar组件在这里引入navbar组件在这里引入navbar组件在这里引入navbar组件--navbar/navbar!--在这里引入navbar组件在这里引入navbar组件在这里引入navbar组件在这里引入navbar组件--/div
/templatescriptimport navbar from /components/navbarimport food from /components/foodexport default {name: HelloWorld,data() {return {msg:[]}},components: {navbar}}
/script!-- Add scoped attribute to limit CSS to this component only --style langstylusimport ../../static/css/index.styl;
/style最后路由都是怎么配的呢在index.js中
{path: /,name: index,component: index,redirect:/food,children:[{path: food,name: food,component: food},{path: seller,name: seller,component: seller},{path: rating,name: rating,component: rating}]},
