学习Vue第五天

Posted 2021-06-04 前端世界升级打怪

实现一个嵌套路由。

---

同样按照我上一篇博客https://blog.csdn.net/m0_50789201/article/details/117372091?spm=1001.2014.3001.5501的思路去实现一个嵌套路由。

---

基本构建。

---

一：在main.js中注册路由器

import Vue from 'vue'
import App from './App'
import router from "./router";




new Vue({//配置对象的属性名都是一些确定的名称，不能随便修改
  el:'#app',
  components:{App},
  template:'<App/>',
  router

})

二：创建路由组件。

About.vue

<template>
<div>
  <h2>about</h2>
</div>
</template>

<script>
    export default {
        name: "About"
    }
</script>

<style scoped>

</style>

Home.vue

News.vue

<template>
<ul>
  <li v-for="(news,index) in newArr" :key="index">{{news}}</li>
</ul>
</template>

<script>
    export default {
        name: "News",
      data(){
          return{
            newArr:['news001','news002','new003']
          }
      }


    }
</script>

<style scoped>

</style>

Massage.vue

<template>
<ul>
  <li v-for="(massage,index) in massages" :key="massage.id">
    <a href="???">{{massage.title}}</a>
  </li>
</ul>
</template>

<script>
    export default {
        name: "Massage",
      data(){
          return{
            massages:[]
          }
      },
      mounted() {
          //模拟ajax请求后台获取数据
        setTimeout(()=>{
          const massages=[
            {
              id:1,
              title:'massagess1'
            },
            {
              id:2,
              title:'massagess2'
            },
            {
              id:3,
              title:'massagess3'
            }
          ]
          //把当前的值赋给以前的massage
          this.massages=massages
        },1000)
      }

    }
</script>

<style scoped>

</style>

---

三：将路由组件映射为路由.

/*
路由器模块
 */
import Vue from 'vue'
import VueRouter from "vue-router";
//映射路由组件

import About from "../views/About";
import Home from "../views/Home";
import News from "../views/News";
import Massage from "../views/Massage";

Vue.use(VueRouter)

export default new VueRouter({
  //n个路由
  routes:[{
    path:'/about',
    component:About
  },
    {
      //path最左侧的斜杠永远代表根路径
      path:'/home',
      component:Home,
      children:[
        {
          path:'news',
          component:News
        },
        {
          path:'massage',
          component:Massage
        },
        {
          path: '',
          redirect:'/home/news'
        }
      ]
    },
    //重定向，默认选择about
    {
      path: '/',
      redirect:'/about'
    }
  ]


})

---

四：接着在App.vue,Home.vue组件中写两种标签。

App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Test</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--生成路由链接-->
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--显示当前组件-->

              <router-view ></router-view>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {}
</script>

<style>

</style>

Home.vue

<template>
  <div>
    <h2>home</h2>
    <div>
      <ul class="nav nav-tabs">

        <router-link to="/home/news">News</router-link>
        <router-link to="/home/massage">Message</router-link>


      </ul>
      <div>

        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Home"
  }
</script>

<style scoped>

</style>

---

五：效果展示

 

结尾：

---

继续加油。