vue3.0-router的子路由创建，路由的传值操作，单页面多路由操作

本文是对jspang-vue-router学习的个人总结

1.子路由的创建

首先我们创建三个组件，分别是hi父组件，hi1子组件1，hi2子组件二

<template>
  <h2>我是大帅比{{msg}}</h2>
  
</template>

<script>
export default {
    name:"hi",
    data(){
        return {
            msg: "i am hi page"
        }
    }
}
</script>

<style>

</style>

<template>
  <h2>{{msg}}</h2>
</template>
<script>
export default {
    name:"hi1",
    data(){
        return {
            msg: "i am hi1111 page"
        }
    }
}
</script>

<style>

</style>

<template>
  <h2>{{msg}}</h2>
</template>

<script>
export default {
    name:"hi2",
    data(){
        return {
            msg: "i am hi2222 page"
        }
    }
}
</script>

<style>

</style>

子路由是要实现什么效果呢，就是一个页面可以显示同的界面，每个不同的界面就写在子路由里面，例如hi1页面就可以出现hi1的界面，也可以出现hi2的界面。

为了能够显示不同的子路由界面（子界面），我们需要给hi添加一个标签

<template>
  <h2>我是大帅比{{msg}}</h2>
  <router-view> </router-view>
  
</template>

<script>
export default {
    name:"hi",
    data(){
        return {
            msg: "i am hi page"
        }
    }
}
</script>

<style>

</style>

router-view标签搭配router-link使用，它的具体作用是：router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view -->

接下来我们需要再router->index.js中设置子路由，这也是设置子路由的关键：

import { createRouter, createWebHashHistory } from 'vue-router'
import hi from '@/components/hi.vue'
import hi1 from '@/components/hi1.vue'
import hi2 from '@/components/hi2.vue'

const routes = [
  {
    path:'/hi',
    name:'hi',
    component:hi,
    children: [
      {
      path:'/',
      name:"hi",
      component:hi,
    },
    {
      path:'/hi1',
      name:"hi1",
      component:hi1,
    },
    {
      path:'/hi2',
      name:"hi2",
      component:hi2,
    },
  ]
  }//有子路由的话 name要设置在children里
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

1. 首先需要引入组件

   import hi from '@/components/hi.vue'
   import hi1 from '@/components/hi1.vue'
   import hi2 from '@/components/hi2.vue'
   

2.绑定子-父关系：父界面是hi,所以

{
    path:'/hi',
    name:'hi',
    component:hi,
  }

子界面是hi1和hi2，用children数组表示

children: [
    {
      path:'/hi1',
      name:"hi1",
      component:hi1,
    },
    {
      path:'/hi2',
      name:"hi2",
      component:hi2,
    },
  ]

3.接下来再APP.vue中添加路径就好了

<template>
  <nav>
    <router-link to="/hi">hiPage</router-link>|
    <router-link to="/hi1">hiPage1</router-link>|
    <router-link to="/hi2">hiPage2</router-link>|
    <router-view></router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

这里的是显示第一层的view，和hi中的view不太一样，hi中的是显示子路由的view

结果显示：

2.如何用路由传递和接受参数

可以用router中的name传值，但是这样传值只能传一个name，我们只介绍最常用的方法，利用router-link传递参数

传递操作：

这里拿hi1举例，在App.vue文件中

<router-link 
:to="{name:'h1',params:{username:'我是h1',id:777}}">
hiPage1
</router-link>

和之前我们写的router-link不同

<router-link to="/hi1">hiPage2</router-link>|

router-link标签类似与a标签，to后面的就相当于url，只不过我们在router-index.js中设置过，如果想用router-link传递参数，首先我们要做的就是把组件的路径绑定，不同于用to=“/hi1"绑定，而是:to=”{name:‘h1’}这个name的值一定要和router中给hi1的name一致

也就是

{
      path:'/hi1',
      name:"hi1",
      component:hi1,
    },

这样我们就完成了最基本的绑定操作，然后传值操作，就利用params:{username:‘我是h1’,id:777}这种对象的格式来传递就好了

取值操作：

我们在hi1组件里进行取值操作

<template>
  <h2>{{msg}}--{{$route.params.username}}--{{$route.params.id}}</h2>
  <h2>{{msg}}</h2>
</template>
<script>
export default {
    name:"hi1",
    data(){
        return {
            msg: "i am hi1111 page"
        }
    }
}
</script>

<style>

</style>

利用$router.params.xxx来进行取值

3.单页面多路由操作

单页面多路由操作，也就是一个页面可以分成不同的部分，每个不同的部分就是一个路由，也就是一个组件。它和子路由的区别就在于子路由一直是单页面单路由，也就是说一次只能显示一个子路由。

也是用到components中的hi，hi1，hi2这三个组件，和第一节一样

单页面多路由，我们要实现的效果就是在hi页面中给分成两部分，左边部分是hi1，右边是hi2，这里要注意虽然hi1和hi2是在hi中显示的但是并没有父子关系，所以我们不能把router-view设置在hi中

要实现多路由操作需要：

在路由中设置：注意设置多路由components一定要加s

import { createRouter, createWebHashHistory } from 'vue-router'
import hi from '@/components/hi.vue'
import hi1 from '@/components/hi1.vue'
import hi2 from '@/components/hi2.vue'

const routes = [
  {
    path:'/hi',
    name:'hi',
    components:{
      default:hi,
      top:hi1,
      bottom:hi2
    }  
  }
  
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

在App.vue中添加，多路由的特点，有多个router-view标签

<template>
  <nav>
    <router-link to="/hi">hiPage</router-link>|
    <router-view></router-view>
    </nav>
  <router-view name="top" 									style="width:500px;height:200px;background-			color:#1212;margin:0 auto;"></router-view>
  <router-view name="bottom" 								style="width:500px;height:200px;background-			color:#1212;margin:0 auto;">
  </router-view> 
</template>

给router-view添加name属性，这个属性要和router-index.js中components中设置的一样，以此完成路由和显示效果（router-view）的绑定

效果如下：