vue-router配置子路由

本文介绍了如何在Vue项目中设置路由并实现不同页面间的跳转。通过修改App.vue和HI.vue文件,创建了Hi1和Hi2两个组件,并在路由配置中进行了相应的设置。文章详细展示了如何使用Vue Router进行子路由的配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.改写App.vue 里面的代码 ,增加路由跳转,增加Hi页面1,Hi页面2的跳转

2.修改HI.vue 里面的内容,增加

 

 

<router-view class="aaa"></router-view>

给子模板提供插入位置

 

3.在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue

Hi1.vue

<template>
  <div class="hello">
       <h1>{{msg}}</h1>
  </div>
</template>
    
<script>
export default {
    name:'hi1',
    data () {
        return {
            msg:'hi1,德国被逼平了'
        }
    }
}

</script>


<style scoped>


</style>

Hi2.vue

<template>
  <div class="hello">
       <h1>{{msg}}</h1>
  </div>
</template>
    
<script>
export default {
    name:'hi2',
    data () {
        return {
            msg:'hi2,巴西也被逼平啦'
        }
    }
}

</script>


<style scoped>


</style>

  4.在router/indx.js 引入 组件Hi1和组件Hi2,在HI的路由配置中加入

 children:[
        {path:'/',component:Hi}, //'/',,根目录,这里指的是HI/
        {path:'hi1',component:Hi1},     //      /hi/hi1
{path:'hi2',component:Hi2}, ]       //  /hi/hi2

 

效果:

 

 2018-06-18  10:17:19

 

转载于:https://www.cnblogs.com/guangzhou11/p/9194558.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值