本節(jié)知識點

• 子路由就是比如從列表頁跳轉(zhuǎn)到文章頁，路徑是/hi/hi1這個樣子的。

實現(xiàn)子路由

• 首先第一步在components文件夾下面創(chuàng)建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">跳轉(zhuǎn)到hi頁面下面的hi1</router-link>
   <router-link to="/hi/hi2">跳轉(zhuǎn)到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>