一些vue路由(route)的配置方法 与vuex配置使用

针对于工作中遇到的vue路由配置问题，与vuex中store的使用
参考vue官网的vue路由配置 https://cn.vuejs.org/v2/guide/routing.html
参考vuex入门文档 https://segmentfault.com/a/1190000009404727
来自:vue官网，segmentfault

安装VUE-CLI步骤网上有很多,我就不具体写了

1.在 VUE-CLI根目录下的SRC中的main.js中引入了路由器；

//main.js
import Vue from 'vue'
import App from './App'
import router from './route.js' //引入路由js文件
import store from './store'     //引入你的store下的js文件

 new Vue({
      router: router,
      store:store,
      render: h => h(App)
}).$mount('#app')

ps:js文件中的render:h=>h(App) 相当于return h(App);

到这里已经完成了对main.js的配置 我们还需要配置app.vue 和 route.js

2.完成vue目录下route.js的配置

//route.js
import Test from './components/view/Test'  //引入路由跳转的页面路径
import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router);

const router = new Router({
  //本地调试模式设定
  mode:'history',
  base:'/user/'
  routes:[
    {
       path:'/Test',  //此处是你路由地址
       name:'Test',
       component:Text //此处是你import对应地址的名称
       meta:{
         title:"标题",
       }
    },
  ]
})
export default router;

3.在App.vue中进行router-view配置

App.vue引用route

//App.vue
<template>
  <div id="app">
<router-view class="router-view" v-wechat-title="$route.meta.title" ></router-view>
</div>
</template>

到这里 大致的文件都配置完毕，文件的目录结构为

4.最后一个就是vuex 的store使用
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
具体参考Vuex中文文档:https://vuex.vuejs.org/zh/guide/
index.js中对store的配置

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const store = new Vuex.Store({
  state:{
  },
  getters:{
  },
  mutations:{
  },
  actions:{
  }
})

具体的store内的参数我会单独写一章，结合工作和网上资料写一篇vuex 仓库的使用.