Router和Vuex

前端路由与Vuex详解

最新推荐文章于 2025-07-14 15:49:17 发布

miller.zc

最新推荐文章于 2025-07-14 15:49:17 发布

阅读量371

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_39188150/article/details/91346859

vue 专栏收录该内容

16 篇文章

订阅专栏

本文深入解析前端路由的工作原理及实现步骤，包括Vue-router的配置与使用，以及如何通过路由钩子函数进行页面跳转。同时，详细介绍了Vuex作为状态管理库的角色和功能，演示了其配置过程及如何在组件间共享状态。

一、前端路由是什么：

我感觉前端路由就相当于后台的action一样,负责转发页面.配置了前端路由,
页面跳转不需要请求后台,更好的实现前后端分离。主要用于SPA（单页面应用）,路由转发不跳转到另外一个页面,只是动态挂载另外的一个组件。

二、怎样实现前端路由：

1、main.js里面引入vue-router插件并使用：

import VueRouter from 'vue-router';
Vue.use(VueRouter);

2、配置路由列表

	const Routers=[
	  {
	    path:'/index',
	    meta:{
	      title:'index'
	    },
	    component:(resolve)=>require(['./router/views/index.vue'],resolve)
	  },{
	    path:'/about/:id',
	    meta:{
	      title:'about'
	    },
	    component:(resolve)=>require(['./router/views/about.vue'],resolve)
	  },{
	    path:'*',
	    redirect:'/index'
	  }
]
	说明:path代表访问路径,component是路径的映射,resolve参数是懒加载

3、路由配置

const RouterConfig={
  mode:'history',
  base: __dirname,
  routes:Routers
};
说明:history代表路由路径按照"/"隔开,base:是路由的根路径,routes是设置路由列表

4、实例化路由对象

const router=new VueRouter(RouterConfig);
说明:VueRouter构造函数实力化一个router对象

5、设置路由的钩子函数

router.beforeEach((to,from,next)=>{
  window.document.title=to.meta.title;
  next();
})
说明:.beforeEach代表路由改变之前,to代表即将改变的路由,from代表目前的路由,next是执行下一个钩子(事件)

6、跳转到指定的路由:

this.$router.push('/about/123')：调整到path为:about的路由,参数为123.
{{$route.params.id}}：获取路由参数

7、挂载路由组件:

  <router-view></router-view>

三、Vuex是啥子:

我理解为就是一个中央仓库,把一些数据或者事件放在这个仓库里面,
各个组件想调用就调用,想修改就修改,,想引用就引用,从而实现代替bus的功能。

四、怎样实现Vuex：

1、main.js里面引入Vuex插件并使用：

import Vuex from 'vuex';
Vue.use(Vuex);

2、vuex仓库配置

//vuex配置
const store=new Vuex.Store({
    state:{
      count:0
    },
  mutations:{
      increment(state,args){
        state.count+=args.count;
      },
      decrease(state){
        state.count--;
      }
  },
  actions:{
      actionincrement(context,args){
        return new Promise(resolve => {
          setTimeout(()=>{
            context.commit('increment',args);
            resolve();
          },1000)
        });
      }
  },  
  getters:{
    filterList:state=>{
      return  state.list.filter(item=>item<5)
    },
    filterListCount:(getters)=>{
      return getters.filterList.length;
    }
  }
})
说明:state是数据,mutations相当于事件，actions想到与做一些处理(直接操作数据的放在mutations里面,含有逻辑处理的放在actions里面,getters属性是我感觉就是设置一个读取数据的视图(相当于sql的视图),方便后面调用)

3、触发actions

this.$store.dispatch({
          type:'actionincrement',
          count:6
        }).then(()=>{
          console.dir(this.$store.state.count);
        })
说明:提交action:actionincrement,then()里面的函数对应定义的时候的resolve(),意为异步处理的时候,如果成功就执行的函数。