vue 动态路由实现 笔记。--含使用vuex
https://www.bilibili.com/video/BV1FL411J7aa?spm_id_from=333.337.search-card.all.click
目录
main 启动文件
utils/data 路由的数据
route/route 路由套件
store/index vuex数据操作相关
testroute/ 1、2、3～ html页面
utils/loaddingRouter 动态路由操作的逻辑
App.vue 页面主框架
大概思路
main 启动文件
import Vue from 'vue'
import App from './App.vue'
import {router} from "./route/route.js" -----这个
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
import axios from 'axios'
import Layout from "ant-design-vue/lib/layout";
import antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
import bbbb from '../src/store/index';
Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.use(Layout).use(antd)
Vue.use(ElementUI);
// Vue.prototype.request2 = request2
new Vue({
router, ---这个
store: bbbb,
render: h => h(App),
}).$mount('#app')
utils/data 路由的数据
// 静态路由
export const staicRouter = [
{path: '/1', meta:{title:1},component: () => import('../testroute/1.vue'), name: '1' },
{path: '/2', meta:{title:2},component: () => import('../testroute/2.vue'), name: '2' },
{path: '/3', meta:{title:3},component: () => import('../testroute/3.vue'), name: '3' },
//前端判断hidden看是否需要展示
{path: '*', redirect:'/1',meta:{title:"错误",hidden: true},component: () => import('../testroute/3.vue'), name: '3' },
]
//模拟动态路由
export const dyamicRouter = [
{path: '/4', meta:{title:4},component: () => import('../testroute/4.vue'), name: '2' },
{path: '/5', meta:{title:5},component: () => import('../testroute/5.vue'), name: '3' },
]route/route 路由套件
import Vue from 'vue'
import VueRouter from "vue-router"
Vue.use(VueRouter)
import {staicRouter} from "../utils/data" //引入静态路由
const routers =staicRouter; //静态路由保存
const createRouter = () => new VueRouter({ //创建路由
mode: "history"
})
export const router = createRouter()
export function resetRouter() {
const newRouter = createRouter();
router.matcher = newRouter.matcher;
}
store/index vuex数据操作相关
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//数据存放
const state={
is: false, //判断是否登录
routerArr: [],
count:11
}
//改变数据的逻辑方法 类似spring的mapper层
const mutations={
//点击了登录退出
CHANGESTORE(state,bool){
state.is=bool
},
// 存放路由
HEARDER(state,data){
state.routerArr=data
},
}
//调用方法操作数据 ---类似spring的service层
const actions={
updateStoreChange(context,state){
context.commit('CHANGESTORE',state)
},
Nav(context,state){
context.commit('HEARDER',state)
}
}
//获取变量
const getters={
updateStore(){
return state.is
},
updateNav(){
return state.routerArr
}
}
const store = new Vuex.Store({
state,mutations,actions,getters
})
export default store
testroute/ 1、2、3～ html页面
<template>
<div>
<div>1</div>
</div>
</template>
<script>
export default {
data(){
return{
a:0,
}
},
methods:{
},
}
</script>>utils/loaddingRouter 动态路由操作的逻辑
//实际路由地址
import {staicRouter,dyamicRouter} from "../utils/data"
//路由套件
import {resetRouter,router} from '../route/route'
//vuex ----安装vuex注意版本 vue2 的要安装vuex3
import store from '../store/index'
let routes=[...staicRouter] //静态路由保存
export default function useaddRoute(){
try {
//满足store 有数据 已登录 没有缓存
if (store.state.is && store.state.routerArr.length === 4){
console.log("走登录逻辑")
store.dispatch('Nav',staicRouter)
//模拟数据请求
setTimeout(()=>{
let data = routesData(dyamicRouter) //将动态路由放入总路由中(静态路由)---接口请求回来的
store.dispatch('Nav',data) //将路由放置缓存vuex
resetRouter() //清空路由
data.forEach(item => {
router.addRoute(item)
})
console.log("登录组建路由完毕",data);
},2000)
}
else if(store.state.is){
pass;
}
else{
console.log("走退出 or 无登录逻辑")
//没有登录就加入静态路由--vuex
store.dispatch('Nav',staicRouter)
//清空路由
resetRouter()
//加入静态跳转路由
staicRouter.forEach(item => {
router.addRoute(item)
})
routes=[...staicRouter]
}
}catch(error){
console.log(error)
}
}
function routesData(result){
result.forEach(item=>{
routes.push({
path: item.path,
name: item.name,
meta: item.meta,
component: () => import(`../testroute/${item.compoent}`)
})
});
return routes
}
APP.vue
<template>
<div>
<ul>
<template v-for="(item,index) in arr">
<li :key="index" v-if="!item.meta.hidden">
<router-link :to="item.path">{{item.meta.title}}</router-link>
</li>
</template>
<button @click="login">登陆</button>
<button @click="esc">退出</button>
</ul>
<br />
<router-view></router-view>
</div>
</template>
<script>
import useaddRoute from "./utils/loaddingRouter"
export default {
data(){
return{
// arr:[], 下面有计算属性所以这里不需要了
};
},
created(){
useaddRoute();
this.arr=this.$store.getters.updateNav;
console.log(this.arr)
},
methods:{
async login(){
await this.$store.dispatch("updateStoreChange",true);
let isLogin= await this.$store.getters.updateStore;
console.log(isLogin)
isLogin ? useaddRoute() : "";
},
async esc(){
await this.$store.dispatch("updateStoreChange",false)
let isLogin= await this.$store.getters.updateStore;
isLogin ? "":location.reload();
}
},
computed: {
// arr对应的变量一有变化,就会重新赋值
// 下面这么写会有警告 ,
// arr() {
// return this.$store.getters.updateNav
// },
// 下面这样写就不会有 参考 https://blog.csdn.net/Cool_breeze_/article/details/115290154
arr: {
get() {
return this.$store.getters.updateNav
},
set(value) {
}},
},
}
</script>
<style>
</style>vuex 操作相关科普
获取vuex某个值
this.$store.state.count
//vuex
import store from '../store/index'
//调用actions里面的方法操作mutations里面的方法
store.dispatch('Nav',data)
