1.安装命令“
cnpm install --save isomorphic-fetch es6-promise
2.由于ie不支持Promise,所以需要安装promise-polyfill;
cnpm install promise-polyfill --save-exact
需要在index.js中引用
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Promise from "promise-polyfill"; if(!window.Promise){ window.Promise = Promise; }
3.使用
<template> <div class="hello"> <h1 @click="getUrl">{{ msg }}</h1> <router-link to="/test/one">testlinks</router-link> <router-link to="/test/two" exact>testlinks1</router-link> <router-link to="/user/one">testlinks2</router-link> <transition :name="tranName"> <router-view></router-view> </transition> <ul> <li v-for=‘item in items‘>{{item.id}}</li> </ul> </div> </template> <script> require("es6-promise").polyfill(); require(‘isomorphic-fetch‘); export default { name: ‘HelloWorld‘, data () { return { msg: ‘Welcome to Your Vue.js App‘, tranName:‘slide-left‘, items:[] } }, created(){ let _this = this; fetch(‘./src/static/data.json‘).then(function(res){ return res.json(); }).then(function(stories){ console.log(stories) _this.items = stories; }).then(function(err){ console.log(err) }) }, methods:{ getUrl(){ console.log(1) } }, beforeRouteUpdate (to, from, next) { const toDepth = to.path.split(‘/‘).length const fromDepth = from.path.split(‘/‘).length this.tranName = toDepth >= fromDepth ? ‘slide-right‘ : ‘slide-left‘ next() }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ { opacity: 0 } .slide-left-enter-active, .slide-right-leave-active { transition: all .5s cubic-bezier(.55,0,.1,1); } .slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(30px, 0); transform: translate(30px, 0); } .slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(-30px, 0); transform: translate(-30px, 0); } </style>