一些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步骤网上有很多,我就不具体写了...
针对于工作中遇到的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 仓库的使用.
更多推荐
所有评论(0)