标签：链接 调用 icon login symbol app before ati rip
前期：
index.html
<div id="app">
<h1>{{intro}}</h1>
<router-view></router-view>
</div>
app.js
var App = new Vue({
router,//router:router的缩写
//传一个路由属性给 Vue 实例，路由现在被定义为一个在 router 实例里的一个routes 选项数组
data: {
intro: "this is my-vue."
}
}).$mount(‘#app‘)
//如果 Vue 实例在实例化时没有收到 el 选项，可以使用 vm.$mount() 手动地挂载一个未挂载的实例
var router = new VueRouter({ routes: [{ path: ‘/‘, redirect: ‘/login‘ }, { path: ‘/login‘, component: Vue.asyncComponent(‘Main/login‘) }, { path: ‘/main‘, component: Vue.asyncComponent(‘Main/main‘), children: [{ path: ‘home‘, component: Vue.asyncComponent(‘Main/home‘) }, { path: ‘xxx‘, component: Vue.asyncComponent(‘Xxx/xxx‘) }] }] });
plugin.js
function plugin(Vue) {
if(plugin.installed) {
return;
}
Vue.asyncComponent = asyncComponent;
}
if(typeof window !== ‘undefined‘ && window.Vue) {
window.Vue.use(plugin);
}
//安装 Vue.js 插件。如果插件是一个函数，它会被作为 install 方法，install 方法将被作为 Vue 的参数调用
function asyncComponent(path) {
...
return function(resolve, reject) {
/*vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。
引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。*/
//基于全局的Vue对象使用http
Vue.http.get(rootPath).then(function(response) {//响应成功回调
......
}
后期：
app.js
创建 router 实例，然后传 `routes` 配置
var router = new VueRouter({ routes: [{ path: ‘/‘, redirect: ‘/login‘ }, { path: ‘/login‘, component: Vue.asyncComponent(‘Main‘,‘login‘) }, { path: ‘/app‘, component: Vue.asyncComponent(‘Main‘,‘main‘), children: [{ path: ‘home‘, component: Vue.asyncComponent(‘Main‘,‘home‘) },{ path: ‘project‘, component: Vue.asyncComponent(‘Project‘,‘project‘) },{ path: ‘task‘, component: Vue.asyncComponent(‘Task‘,‘task‘) },{ path: ‘topic‘, component: Vue.asyncComponent(‘Topic‘,‘topic‘) }] }] });
//创建和挂载根实例，通过 router 配置参数注入路由
var App = new Vue({
router
}).$mount(‘#app‘)
index.html
<div id="app"><router-view></router-view></div>
//这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。一个被渲染组件同样可以包含自己的嵌套 <router-view>。
main.html
<div class="left-menu">
<!-- 从上到下排列的按钮 包装 -->
<div class="wrapper">
<router-link to="/app/home" class="menu-link home">
<img src="img/logo.png" width="100%" />
</router-link>
<div class="main">
<router-link to="/app/project" class="menu-link" v-bind:class="{‘active‘:routePath==‘/app/project‘}">
<svg class="icon">
<use xlink:href="#icon-xiangmu"></use>
</svg>
<div>项目</div>
</router-link>
......
</div>
</div>
</div>
<div id="content">
<router-view></router-view>
</div>
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
app.js
『导航』表示路由正在发生改变。vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。
//使用 router.beforeEach 注册一个全局的 before 钩子
router.beforeEach(function(to, from, next) {
next();//确保要调用 next 方法，否则钩子就不会被 resolved。
})
当一个导航触发时，全局的 before 钩子按照创建顺序调用。每个钩子方法接收三个参数：
1）to: Route: 即将要进入的目标 路由对象
2）from: Route: 当前导航正要离开的路由
3）next: Function: 一定要调用该方法来 resolve 这个钩子。
//注册一个全局的 after 钩子
router.afterEach(function(route) {
store.commit([ROUTE_UPDATE_ROUTE],route); //更新store中的route状态
})
store.js
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex 使用 单一状态树，用一个对象就包含了全部的应用层级状态，每个应用将仅仅包含一个 store 实例。Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割。对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态。
var store = new Vuex.Store({
state: {
},
mutations: {
},
modules: {
route: routeStore,
account: accountStore,
topic: topicStore
}
});
var ROUTE_UPDATE_ROUTE = ‘route/updateRoute‘
var routeStore = {
state: {
path: ‘‘,
params: ‘‘,
query: ‘‘
},
mutations: {
[ROUTE_UPDATE_ROUTE]: function(state,route){
state.path = route.fullPath;
state.params = route.params;
state.query = route.query;
}
}
}
main.html
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态。
computed: {
routePath: function() {
return store.state.route.path
}
}
//<router-link> 创建 a 标签来定义导航链接
<router-link to="/app/topic" class="menu-link" v-bind:class="{‘active‘:routePath==‘/app/topic‘}">
<svg class="icon">
<use xlink:href="#icon-huati"></use>
</svg>
<div>议题</div>
</router-link>
引入的js框架
补充说明：iconfont
如果是成体系的应用使用，建议用户把icon加入项目，然后使用下面三种推荐的方式。
1）unicode引用
2）font-class引用
3）symbol引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法，这种用法其实是做了一个svg的集合
结合项目学习vue2(路由vue-router，状态管理vuex)
标签：链接 调用 icon login symbol app before ati rip
原文地址：http://www.cnblogs.com/colorful-coco/p/6366159.html
