vue-router和vuex

背景

將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,
})

標籤

• 頁面無刷新路由跳轉需使用router-link，
• 默認是a標籤
• 使用tag=""能夠指定標籤
• <router-link to="/">常峻</router-link>
• 跳轉到上一次瀏覽的頁面
• this.$router.go(-1)

二級路由

//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