VUE_路由(Router)

最近VUE很火的前端，专门花了点时间学习，里面提到路由的概念，在这进行记录学习

1.引入Roulter

npm install vue-router --save

2.创建组件

路由组件一般放在views或pages包下
非路由组件一般放在components包下

创建两个测试用的路由组件

3.创建路由器

路由器一般专门定义一个包，如：可放在名为router的包下

利用js创建路由器，将上面创建的路由组件引入路由器

/*
路由器模块
 */
import Vue from  "vue"
import VueRouter from "vue-router"

import About from "../views/About.vue"  //路由组件
import Home from "../views/Home.vue"    //路由组件

Vue.use(VueRouter)

export default new VueRouter({//向外暴露路由器对象
  //配置N个路由
  routes:[
    {
      path:"/about",
      component:About
    },
    {
      path:"/home",
      component:Home
    },
    {
      path:"/",//默认打开的路由组件
      redirect:"/about"//重定向到about
    }
  ]
})

4.配置路由器

上面已经创建的路由组件与路由器，现在我们需要将路由器配置到VUE中

在入口js(main.js)中进行配置

import Vue from 'vue';
import App from './App.vue';
import router from "./router"  //引入路由器


new Vue({//配置对象的属性名都是一些固定的名称，不可随便修改
  el:"#app",
  components:{App},
  template:"<App/>",
  router:router  //配置路由器
})

5.使用路由

在页面中通过路由来使用路由组件，

在这个demo中我在App.vue中使用了路由

 

<template>
  <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>

通过<router-link to="/about"></router-link>,定义跳转的路由组件

通过<router-view></router-view>,引入相应的路由组件

 

到这里，路由的基本配置与使用就ok了，我个人觉着最重要的还是理解。感觉VUE真的太便捷了，跟java的设计思想与很多相似之处，用多了，估计原生js估计也会落下很多，但在企业开发中，VUE开发确实方便快捷！VUE YES!