Vue的学习（13）路由

基本路由

感觉就像超链接一样，只不过他不跳转
把对应的组件创建好

配置好路由器

//main
import Vue from 'vue'
import App from './App'

//配置路由器
import router from './router'

new Vue({
  el:'#app',//需要挂载到哪
  components:{App},//将App映射为标签
  template:'<App/>',//模板
  //配置对象的属性名都是一些确定的属性名 不能写router2之类的，
  //注册路由器
  router
})

再配置好路由

//index
/*
路由器模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About'
import Home from '../views/Home'
Vue.use(VueRouter)//使用插件

export default new VueRouter({
  //配置n个路由
  routes:[
    {
    //path就是路径，路由就是什么样的路径访问什么样的页面，
    //就跟道路上的路牌一样。path 这里表示这个站点什么样的路径到什么样的页面组件。
      path:'/About',
      component:About
    },
    {
      path:'/Home',
      component:Home
    },
    { //自动跳转路由，也就是默认显示
      path:'/',
      redirect:'./About'
    }
  ]
})

//App
<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 msg="abc"></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style scoped>

</style>

这里为了方便，在根路径下的index中，设置了class样式

 <style>
    .router-link-active {
      color: red !important;
    }
  </style>

router-link-active 表示当前路由被激活的时候，添加的属性

总结：我觉得总体思路就是设置path路径名，然后用router-link 去to path的值，然后找到component，去到对应的组件，然后通过router-view显示出来

嵌套路由

再上一个的基础上继续完善

在这里使用了嵌套路由，值得注意的是一定要记得path那里的路径问题，要层层传递下去，表示好当前路径，

//index  
/*
路由器模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About'
import Home from '../views/Home'
import Message from '../views/Message'
import News from '../views/News'
Vue.use(VueRouter)//使用插件

export default new VueRouter({
  //配置n个路由
  routes:[
    {
      path:'/about',
      component:About
    },
    {
      path:'/home',
      component:Home,
      children:[
        {
          // path:'/news',  //path最左侧的永远代表根路由，所以这么写不对
          path: '/home/news',
          component:News
        },
        {
          path:'messages',//简化写法
          component:Message
        },
        {
          path:'',
          redirect:'/home/news'//默认显示news
        }
      ]
    },
    {
      path:'/',
      redirect:'./About'
    }
  ]
})

这里模拟了ajax请求

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

<script>
  export default {
    data(){
      return{
        messages:[]
      }
    },
    mounted() {
      //模拟ajax请求从后台获取数据
      setTimeout(() => {
        const messages = [
          {
            id: 1,
            title: 'message001'
          },
          {
            id: 3,
            title: 'message003'
          },
          {
            id: 5,
            title: 'message005'
          }
        ]
        this.messages = messages
      },1000)
    }
  }
</script>

<style scoped>

</style>

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

<script>
  export default {
    data(){
      return{
        newsArr:['','news001', 'news002', 'news003', 'news004']
      }
    }
  }
</script>

<style scoped>

</style>

//Home
<template>
  <div>
    <h2>Home</h2>
    <div>
      <ul class="'nav nav-tabs">
        <li>
          <router-link to="/home/news">News</router-link>
          <router-link to="/home/messages">Message</router-link>
        </li>
      </ul>
      <div>
        <router-view></router-view>
        <hr>
      </div>
    </div>
  </div>

</template>

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

<style scoped>

</style>

这里最后样式应该是有点问题，但是不影响总体思路，问题不大，感觉这里路由刚接触的原因，还是有些不适应，但是总的来说，就是设计好组件，然后注册路由，然后去页面吧它显示出来即可，主要是注册容易出点错，另外，理解router-view，不必太纠结，就像in-for一样，他就是显示当前你点击的那个路由对应的组件，多练多熟悉，但是。。。

要去吃饭了呃~~~~~~~~~~hh