结合项目学习vue2(路由vue-router，状态管理vuex)

首页 > 代码库 > 结合项目学习vue2(路由vue-router，状态管理vuex)

结合项目学习vue2(路由vue-router，状态管理vuex)

2024-09-03 01:24:12 220人阅读

前期：

index.html

<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

//这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。一个被渲染组件同样可以包含自己的嵌套 <router-view>。

技术分享

main.html

　　<router-link to="/app/home" class="menu-link home">

　　</router-link>

　　　　<router-link to="/app/project" class="menu-link" v-bind:class="{‘active‘:routePath==‘/app/project‘}">

　　　　　　</svg>

　　　　</router-link>

　　　　......

　　</div>

<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="http://www.mamicode.com/#icon-huati"></use>
	</svg>
	<div>议题</div>
</router-link>

技术分享