你想知道新的科技玩意儿吗?没错,就是那个超好用的Vue-Router。一点就行,想要哪块内容立即显示,就和高级路由器一样酷炫。快去试试看,包你爱不释手!
//1、创建路由组件 const Link1={template:'#link1'}; const Link2={template:'#link2'}; const Link3={template:'#link3'}; //2、定义路由映射 const routes=[ { path:'/link1', //定义相对路径 component:Link1, //定义页面的组件 children:[ { path:'intro', //子路由/link1/intro component:{template:'#ariesIntro'}, name:'ariesIntro', //为路由命名 }, { path:'feature', component:{template:'#ariesFeature'}, }, {path:'/',redirect:'intro'} ] }, {path:'/link2',component:Link2}, {path:'/link3',component:Link3}, {path:'/',redirect:'/link1'} //配置根路由,使其重定向到/link1 ]; //3、创建router实例 const router = new VueRouter({ routes //缩写,相当于 routes: routes }); // 4、 创建和挂载根实例。 const app = new Vue({ router }).$mount('#app'); //挂载到id为app的div
咱们直接来聊聊重点,你知道怎么配置 Vue 的 vue-router 吗?记住,首页要用根路由,否则一打开页面就会直接跑到那儿去,哪儿还有别的内容可看!这个可重要了!
白羊座 处女座 金牛座
来聊聊嵌套路由这个好东西,真的特别实用!每条路由都有”孩子们”(children)这个属性,用它就能添加子路由。说到子路由,它们就在父路由所在的那个文件夹里。记得,格式会自动补全哒。例如,把intro和feature两个小淘气儿放进link1里,接下来在link1模板上再好好整理一番,看到最后的成果绝对让人惊艳
白羊座
动态路由真的太方便!我们不仅能自己设定路由器路径里的变量,还可以让它根据参数值跳转去特定页面!举个例子,只需要把路径写成”goods/:goodsId”,然后填写上数字15,就会自动跳转到/goods/15,简直是省事儿又实用!
别急,给你支个妙招儿。咱们可以通过编程把网页跳转和传参数这些事给办了。比如说,随便哪个按钮上都加上’jump’操作,再把methods里头的页面跳转搞好,直接跳到/根目录下面的cart文件夹去,记住要带着一个参数goodsid 等于123。跳到cart页面后,用$route.query就能轻松读出来了,超级简单!接着用$router搞定跳转;取参数时就得用$route。对了,别忘了,咱们还能控制跳转的方向,前或后都行!
听说过那个名字叫做命名路由的东西吗?超级有意思,它能让我们把那些复杂难记的路由器路径变成易记的名字。再来看看模板中的动态绑定,就那么一句简单的话:“to='{name:’pathName}’”,别忘了加引号,这样点击链接就能准确找准地方!比如在白羊座那块链接加上这段话: “to='{name:’ariesIntro’}’”, 轻轻一点就能直达Link1下面的Intro页了,免去了不少麻烦!
jump(){ this.$router.push('/cart?goodsId=123') }
好了,就到这里啦前面说了那么多,有没有帮到你们呀? 如果还想问点儿啥,直接在下面留言给我哦别忘了给咱点赞,分享出去也挺好哒咱们今天搞定了Vue-Router咋用,好玩儿不?这个好东西就是把各种网页小零件连起来,快速换页面嗖嗖的。嵌套、动态、编程、命名这几个技巧,就让你写代码变得轻松自如咯希望你们爱死这篇文章,也盼着在实际操作中用得上哈~别忘了点赞、评论和转发
商品ID:{{$route.query.goodsId}}
评论0