本篇文章给大家介绍有关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:'<div>first内容</div>'}
const second = { template:'<div>second内容</div>'}
const Home = { template:'<div>Home内容</div>'}
const firstFirst = { template:'<div>firstFirst内容 {{$route.params.id}} {{$route.params.name}}</div>'}
const firstSecond = { template:'<div>firstSecond内容 {{$route.params.id}} {{$route.params.name}}</div>'}

//单独的写组件模版的时候可直接这样写,名称自定义
const sonRunterTemplate ={
  template:`
      <div class="">
            <h2>组件</h2>
            <router-view class="red"></router-view> 
       </div>
  `
}

//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:`
    <div id='r'>
        <h1>导航</h1>
        <p>{{$route.name}}</p>
         <ol>
            <li><router-link to="/">/</router-link></li>   <!--router-link存放路由链接的   to相当于href,表示链接到哪里-->
            <li><router-link to="/first">first</router-link></li>
                <ol>
                    <li><router-link :to="{name:'Home-First-First',params:{id:147,name:'张三'}}">first</router-link></li>
                    <li><router-link :to="{name:'Home-First-Second',params:{id:258,name:'李四'}}">second</router-link></li>
                </ol>
            <li><router-link to="/second">second</router-link></li>
          </ol>
          <router-view class="green"></router-view>   <!--规定整个路由显示在其中,class表示修饰的类-->
    </div>
    `
}).$mount('#app')
/*
路由中参数的传递:
    1.通过路由传参 name:'Home-First'   获取 <p>{{$route.name}}</p>
    2.绑定to方式进行参数的传递  :to="{name:'Home-First-Second',params:{id:258,name:'李四'}}"  获取{{$route.params.id}} {{$route.params.name}}
    */
/*
route 路线  $route.params
router  路由
routes  路由复数形式  一定是数组
*/

运行结果:
在这里插入图片描述

以上就是简析vue子路由参数传递与接收的详细内容,更多请关注动说科技其它相关文章!

声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除

  • 相关标签:Vue Router
  • 推荐:PHP从基础到实战教程视频

    • 上一篇:Vuex Module-状态仓库分割的使用介绍
    • 下一篇:vue Router路由流程简单梳理(使用步骤)

    相关文章

    相关视频


    • 深入聊聊Vue中的Router路由
    • 如何使用VueRouter4.x?快速上手指南
    • 详解Vue-router子路由(嵌套路由)如何创建
    • 举例说明Vue Router路由重定向与别名设置
    • 简析vue子路由参数传递与接收
    • vue2 vs vue3 差异化对比--体积减小
    • vue2 vs vue3 差异化对比--更易维护
    • vue2 vs vue3 差异化对比--原生支持度更高

    专题推荐

    • 独孤九贱-php全栈开发教程

      全栈 170W+

      主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门

    • 玉女心经-web前端开发教程

      入门 80W+

      主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门

    • 天龙八部-实战开发教程

      实战 120W+

      主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习

    • Laravel 9 学习正当时—保姆级教程,想学不会都难!

      实战 21317次学习

      主讲:博愿 全栈工程师,拼命探索,不计后果

    • 千万级数据并发解决方案(理论+实战)

      实战 55750次学习

      主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习

    • 共22门课程,总价3725元,开通VIP会员免费学

      实战 55750次学习

      主讲:Peter-Zhu、西门大官人、灭绝师太、欧阳克

    作者信息

    藏色散人

    好好学习天天向上!

    最近文章
    详解Vue项目如何创建路由页面426
    深析Vue router-link组件实现路由导航390
    超详细!总结vue实现路由跳转的3种方式!728
    ❤️‍🔥IPIDEA 爬虫采集无IP封禁 无限并发1679
    讲师入驻(把你的才变成财)
    IPIDEA,高度匿名的真实住宅代理,爬虫采集无IP封禁,千万IP资源,无限并发,领取2G流量,住宅IP免费用
    ❤️‍🔥IPIDEA,高度匿名的真实住宅代理,爬虫采集无IP封禁,千万IP资源,无限并发,领取2G流量,住宅IP免费用
    • 最新文章
    • 热门排行

    • ❤️‍🔥共22门课程,总价3725元,开通VIP会员免费学习
    • 一文掌握vue-router的安装与使用
    • 深入探讨Vue中数据双向绑定的原理及实现
    • 实例详解Vue中v-model指令的用法
    • 详解Vue项目如何创建路由页面
    • 实例详解vue基于element-plus的组件二次封装
    • 深析Vue router-link组件实现路由导航
    • 详解Vue渲染列表指令:v-for
    • vue引入Element-plus的全局引入与局部引入(附代码)

    • 共22门课程,总价3725元,开通VIP会员免费学习!
    • vue3.0和vue2.0的区别是什么?
    • .vue 是什么
    • vue子组件怎么向父组件传值
    • vue父组件怎么调用子组件的方法
    • vue子组件怎么调用父组件的方法
    • vue-cli-service不是内部或外部命令怎么解决
    • vue中elementUI是什么
    • vue常用指令有哪些
    视频教程分类
    • php视频教程
    • html视频教程
    • css视频教程
    • JS视频教程
    • jQuery视频教程
    • mysql视频教程
    • Linux视频教程
    • Python视频教程

    Comment list 共有 0 条评论

    暂无评论

    微信小程序

    微信扫一扫体验

    立即
    投稿

    微信公众账号

    微信扫一扫加关注

    发表
    评论
    返回
    顶部