(二)Vue-router 配置子路由

本节知识点

• 子路由就是比如从列表页跳转到文章页，路径是/hi/hi1这个样子的。

实现子路由

• 首先第一步在components文件夹下面创建2个文件，起名叫做Hi1.vue另外一个叫做Hi2.vue

Hi1.vue

<template>
    <div class="text1">
      {{message1}}
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
      name:"Hi1",
      data(){
        return {
          message1:"这个就是Hi1页面"
        }
      }
    }
</script>

<style scoped>
  .text1{
    font-size:46px;
    color:red;
  }
</style>

Hi2.vue

<template>
    <div class="text2">
      {{message2}}
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
      name:"Hi2",
      data(){
         return {
           message2:"这个就是Hi2页面"
         }
      }
    }
</script>

<style scoped>
  .text2{
    font-size:46px;
    color:red;
  }
</style>

特别注意的就是要是css或者JS文件太多的话可以独立出来格式就是

<style src="../assets/css2.css"></style>
<script src="xxxx"></script>

• 第二步在app.vue里面写好链接

  <router-link to="/hi/hi1">跳转到hi页面下面的hi1</router-link>
   <router-link to="/hi/hi2">跳转到hi页面下面的hi2</router-link>

• 第三步 重点写路由 index.js

首先需要引入两个组件

import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

然后配置路由 简单来说就是加个children属性,这里千万注意了路径前面不要写/,然后在配置组件

  {
      path:'/hi',
      name:"Hi",
      component:Hi,
      children:[
        {path:"/",component:Hi,name:"Hi"},
        {path:"hi1",component:Hi1,name:"Hi1"},
        {path:"hi2",component:Hi2,name:"Hi2"},
      ]
    }

• 第四部在 hi.vue下面加入 这样就把hi.vue打造成了一个父页面了

<router-view></router-view>

特别注意的就是模板文件里面必须要有包裹层否则router-view出不来

<template>
    <div>
    <div class="hello">
        {{msg}}
    </div>
  <router-view></router-view>
    </div>
</template>