做网站中网页的大小,王也头像高清帅气,广州网站建设信科分公司,东莞网络公司哪个网站好上篇我们讲了vue路由的使用
今天我们来讲vue中路由的嵌套#xff0c;路由的params参数,命名路由
一.路由的params参数
1.配置路由规则#xff0c;使用children配置项#xff1a;
router:[{path:/about,component:About,},{path:component:Home,//通过children配置子路由c…上篇我们讲了vue路由的使用
今天我们来讲vue中路由的嵌套路由的params参数,命名路由
一.路由的params参数
1.配置路由规则使用children配置项
router:[{path:/about,component:About,},{path:component:Home,//通过children配置子路由chilren:{path:news,//此处一定不要写/newcomponent:News},{path:message,//此处一定不要写/messagecomponent:Message}}
]
2.跳转要写完整路径
router-link tohome/newsNewsrouter-link//router中的index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from vue-routerimport homeRouter from ../page/homeRouter
import AboutRouter from ../page/aboutRouter
import News from ../page/NewsRouter
import Message from ../page/MessageRouter// 创建并暴露一个路由器
export default new VueRouter({routes: [{path:/about,component:AboutRouter},{path:/home,// 二级路由component:homeRouter,children:[{path:news,component:News,},{path:message,component:Message,}]}]
})//homeRouter.vue
templatedivh3我是home的内容/h3divul classnav-tabslirouter-link to/home/newsNews/router-link/lilirouter-link to/home/messageMessage/router-link/li/ulrouter-view/router-view/div/div
/templatescript
export default {name:homeRouter
}
/scriptstyle/style//homeRouter.vue
templatedivh3我是home的内容/h3divul classnav-tabslirouter-link to/home/newsNews/router-link/lilirouter-link to/home/messageMessage/router-link/li/ulrouter-view/router-view/div/div
/templatescript
export default {name:homeRouter
}
/scriptstyle/style//MessageRouter.vue
templatedivullia hrefmessage001/a /lilia hrefmessage002/a /lilia hrefmessage003/a /li/ul/div
/templatescript
export default {name:MessageRouter
}
/scriptstyle/style//newRouter.vue
templatedivullia hrefNew001/a/lilia hrefNew002/a/lilia hrefNew003/a/li/ul/div
/templatescript
export default {}
/scriptstyle
/style如图所示这就是展示的效果 二.路由的query参数
1.传递参数
跳转并携带query参数to的字符串写法
router-link :to/home/message/detail?id{m.id}title{m.title}/router-link
2.接收d参数
router-link :to{path:/home/message/detail,query:{id:666,title:你好}}/router-link//router的index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from vue-routerimport homeRouter from ../page/homeRouter
import AboutRouter from ../page/aboutRouter
import News from ../page/NewsRouter
import Message from ../page/MessageRouter
import DetailRouter from ../page/DetailRouter;// 创建并暴露一个路由器
export default new VueRouter({routes: [{path:/about,component:AboutRouter},{path:/home,// 二级路由component:homeRouter,children:[{path:news,component:News,},{path:message,component:Message,children:[{path:detail,component:DetailRouter}]}]}]
})//messageRouter.vue
templatedivul!-- 跳转路由器并携带query参数to的字符串写法 --li v-form in messageList :keym.id!-- router-link :to/home/message/detail?id${m.id}title${m.title}{{m.title}}/router-link --!-- 跳转路由并携带query参数to的对象写法 --router-link :to{path:/home/message/detail,query:{id:m.id,title:m.title}}{{m.title}}/router-link/li/ulhrrouter-view/router-view/div
/templatescript
export default {name:MessageRouter,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},}
/scriptstyle
/style//detail.vue
templateulli消息编号{{$route.query.id}}/lili消息标题{{$route.query.title}}/li/ul
/templatescript
export default {name:DetailRouter,
}
/scriptstyle
/style如图 三.路由的params参数
1.配置路由声明params参数
{path:/home,// 二级路由component:homeRouter,children:[{path:news,component:News,},{path:message,component:Message,children:[{name:xijie,path:detail/:id/:title,//使用占位符声明接收params参数component:DetailRouter}]}]}
2.传递参数!-- 跳转路由器并携带params参数to的字符串写法 --
router-link :to/home/message/detai/666/你好跳转/router-link!-- 跳转路由并携带params参数to的对象写法 --
router-link :to{name:xijie,params:{id:666,title:你好}}跳转/router-link
3.特别注意路由携带params参数时若使用to的对象写法则不能使用path配置项必须使用name配置
4.接收参数:$route.params.id$route.para//router的index.js detail相关部分{path:message,component:Message,children:[{name:xijie,path:detail/:id/:title,//node.js的占位符为params准备component:DetailRouter}]}//detailRouter.vue
templateulli消息编号{{$route.params.id}}/lili消息标题{{$route.params.title}}/li/ul
/templatescript
export default {name:DetailRouter,
}
/scriptstyle/style//messageRouter.vue传参部分li v-form in messageList :keym.id!-- 跳转路由器并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-link --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xijie,params:{id:m.id,title:m.title}}{{m.title}}/router-link/li今天写到这 下次我们再讲解 命名路由
