本篇文章给大家介绍有关vue路由：子路由，路由中参数的传递，希望对大家有帮助！
1.在idea中新建vue项目
2.main.js中修改
import Vue from 'vue'// import Router from './Router' /*引用自同级Router.js*/import Router from './SonRouter' /*引用自同级SonRouter.js*/
登录后复制
【相关推荐：vue.js视频教程】
3.src下新建文件SonRouter.js
立即学习“前端免费学习笔记（深入）”；
/*子路由*/import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)//声明模版，点击链接显示对应的内容const first = { template:'first内容'}const second = { template:'second内容'}const Home = { template:'Home内容'}const firstFirst = { template:'firstFirst内容 {{$route.params.id}} {{$route.params.name}}'}const firstSecond = { template:'firstSecond内容 {{$route.params.id}} {{$route.params.name}}'}//单独的写组件模版的时候可直接这样写，名称自定义const sonRunterTemplate ={ template:` 组件
`}//router自己定义名字const router = new VueRouter({ mode:'history', base:__dirname, //当前的路径 dirname在node中指当前的本地路径 routes:[ //以数组的方式给出 [{},{}],多个的话一定是routes复数形式 {path:'/',name:'Home',component:Home}, {path:'/first',component:sonRunterTemplate, children:[ {path:'/',name:'Home-First',component:first}, {path:'first',name:'Home-First-First',component:firstFirst}, {path:'second',name:'Home-First-Second',component:firstSecond} ] }, {path:'/second',name:'Home-Second',component:second} ]})new Vue({ router, template:` 导航
{{$route.name}}
- /
- first
- first
- second
- second
`}).$mount('#app')/*路由中参数的传递： 1.通过路由传参 name:'Home-First' 获取 {{$route.name}}
2.绑定to方式进行参数的传递 :to="{name:'Home-First-Second',params:{id:258,name:'李四'}}" 获取{{$route.params.id}} {{$route.params.name}} *//*route 路线 $route.paramsrouter 路由routes 路由复数形式 一定是数组*/
登录后复制
运行结果：
以上就是简析vue子路由参数传递与接收的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3231635.html
