当前热门：简析vue子路由参数传递与接收

(资料图片仅供参考)

本篇文章给大家介绍有关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子路由参数传递与接收的详细内容，更多请关注php中文网其它相关文章！

关键词：参数传递复数形式相关文章