vue-router和vuex

89477009

2019-06-27

关注关注

背景

将vue-router和vuex进行整理，以便于查阅和加深记忆。

Vue-router

安装

npm install vue-router

导入路由

import VueRouter from 'vue-router'

配置路由

const routes=[
  //点击主页展示home组件内容
  {path:'/',component:Home},
  {path:'/menu',component:Menu},
]
//实例化一个router
const router=new VueRouter({
  routes,
  mode:'history'
})

在vue实例中引用一下
new Vue({
  el: '#app',
  router,
})

二级路由

//childern属性下面写配置
{
    path: '/about', name: "aboutLink", redirect: '/about/contact', component: About, children: [
      {
        path: '/about/contact', name: "contactLink", redirect: '/person', component: Contact, children: [
          {path: '/phone', name: "phoneLink", component: PhoneNumber},
          {path: '/person', name: "personLink", component: PesonName},
        ]
      },
      {path: '/history', name: "historyLink", component: History},
      {path: '/orderingGuide', name: "orderingGuideLink", component: OrderingGuide},
      {path: '/delivery', name: "deliveryLink", component: Delivery},
    ]
  },

router-view复用

//添加name属性，在路由中定义多个组件
components: {
  default:Home,//设置默认Home组件
    'orderingGuide':OrderingGuide,
    'delivery':Delivery,
    'history':History
  }

全局导航守卫

router.beforeEach((to, from, next) => {
  // 此处写条件
  //to：即将要进入的路由目标对象
  //from：当前导航正离开的路由
  //next：调用的方法
})

组件内的守卫

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
        // 通过 `vm` 访问组件实例
      })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

Vuex

vuex安装

npm install vuex --save
在src目录下新建store文件夹，并在其中创建store.js文件
在store.js中写入

vuex使用

import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex) //使用vuex
export const store=new Vuex.Store({}) //实例化srore让外部可以正常引用
state:{menuItems:{}} //设置属性
getters:{getmenuItems:state=>state.menuItems} //获取属性的状态
mutations:{} //改变属性的状态
actions:{setUser({commit},user)} //应用mutations
import {store} from './store/store.js' //在main.js中全局引入store.js
new Vue({store}) //在实例中引用store

vuex使用

this.$store.commit("setMenuItems",res.data) //使用commit触发改变属性状态，去mutations找到
setMenuItems('state',res.data)方法，第一个参数是状态，第二个参数是数据。在这个方法中只需要把要存储的数据赋给state下面的要存储的对象即可。
this.$store.state.menuItems //从vuex中获取数据
this.$store.commit("setMenuItems",menuArray) //同步数据
this.$store.getters.getmenuItems //通过getters获取数据
this.$store.dispatch("setUser",data) //更改状态actions

vue-router 路由 vue