import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//如果使用模块化机制编程，导入Vue和VueRouter，就需要调用Vue.use(Router)

import Login from '@/components/login' 
import Index from '@/components/index' 
import PointList from '@/components/pointList/pointList' 
import SettLement from '@/components/pointList/settlement' 
//创建router实例，然后传入‘routes’配置
export default new Router({
  //routes配置可以直接传入，也可以先定义后使用
  //每个路由都应该映射一个组件，其中component可以是通过Vue.extend()创建的组件构造器，
  或者只是一个组件配饰对象。(今天暂时不考虑嵌套路由的情况)
  routes: [
    {
      path: '/', // 登录
      name: 'Login',
      component: Login
    },
    {
      path: '/index', // 主页
      name: 'Index',
      component: Index
    },
    {
      path: '/pointList', // 点单
      name: 'PointList',
      component: PointList
    },
    {
      path: '/settLement', // 结算
      name: 'SettLement',
      component: SettLement
    }
]
})

组件路由除了使用全局组件 router-link 来实现点击跳转(相当于按钮)外，还可以使用组件本身
具有的一个实例对象$router及其一些属性来达到目标。  
$router 是VueRouter的一个实例对象，相当于一个全局的路由器对象。在Vue实例内部，你可以
通过$router访问路由实例，里面含有很多属性和子对象，例如history对象，经常用到的跳转链
接就可以调用this.$router.push，this.$router.push会往history栈中添加一个新记录。

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

<router-link :to="{name:'PointList', params: { userId: 123 }}">
      <i class="icon"><img src="../assets/point.png" alt=""></i>
      <span>点单</span>
</router-link>

<footer class="version" @click="goPage('Author')">v 1.0</footer>
//Js：
methods: {
    goPage(url, param) {
      this.$router.push({ name: url });
    }
}

字符串(string)。等于当前路由对象的路径，会被解析为绝对路径，
如:http://example.com/#/login?name=aa，this.$route.path
，输出“/login”，即对应上面1中路由匹配时routes配置中的“path”；

<router-link :to="{name:'Order', params: { userId: 123 }}">
</router-link>

this.$router.push({ name: 'Order', params: { userId: 123 }})

this.$router.push({ name: 'Order', params: { userId: 123 }})
console.log(this.$route.params.userId); //123

this.$router.push({name: 'login', query:{name: 'userName'}});
this.$route.query.name;    //you
//此时路由为:"http://example.com/#/login?name=userName。"

如：{ path: '*',redirect: {name: 'hello'}}
	此时访问不存在的路由http://example.com/#/a会重定向到hello，
在hello访问this.$route.redirectedFrom; 输出“/a”。

watch：{‘$route’ (to, from) {}}

// watch $route 决定使用哪种过渡
watch:{
    '$route' (to, from) {
      //此时假设从index页面跳转到pointList页面
      console.log(to); // "/pointList"
      console.log(from); // “/index”
      const routeDeep = ['/', '/index','/pointList', '/settLement'];
      const toDepth = routeDeep.indexOf(to.path)
      const fromDepth = routeDeep.indexOf(from.path)
      this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
    }
  },

<transition :name="transitionName">
    <router-view class="view app-view"></router-view>
</transition>

this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'

.fold-left-enter-active {
    animation-name: fold-left-in;
    animation-duration: .3s;
  }
  .fold-left-leave-active {
    animation-name: fold-left-out;
    animation-duration: .3s;
  }
.fold-right-enter-active {
    animation-name: fold-right-in;
    animation-duration: .3s;
  }
  .fold-right-leave-active {
    animation-name: fold-right-out;
    animation-duration: .3s;
  }

@keyframes fold-left-in {
    0% {
      transform: translate3d(100%, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fold-left-out {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-100%, 0, 0);
    }
  }