[JavaScript知识库]动态路由简单示例

路由router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//常规路由，一开始即可访问的路由
export const constantRoutes = [
	{
		path: '/login',
		component: ()=>import('../views/Login.vue')
	},
	{
		path: '/register',
		component: ()=>import('../views/Register.vue')
	}
];
//异步路由，不是那种异步。指的是带权限访问的路由
export const asyncRoutes = [
	{
		path: '/permission',
		component: ()=>import('../views/Permission.vue')
	},
];

const router = new VueRouter({
	routes: constantRoutes,
	mode: 'history'
})
export default router;

vuex存储登录相关信息store/index.js，根据需要选用，非必要

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

const store = new Vuex.Store({
	state: {
		isLogin: false
	},
	mutations: {
		login(state) {
			state.isLogin = true;
		}
	}
})
export default store;

App.vue（此处直接只有一个页面，所以直接写在App组件）

<template>
	<div id="app">
		<!--导航-->
		<div class="nav">
			<router-link to="/login">登录</router-link>
			<router-link to="/register">注册</router-link>
			<!--v-if判断vuex中的isLogin是否为true来决定是否显示-->
			<div class="asyncLink" v-if="$store.state.isLogin">
				<router-link to="/peremission">Permission</router-link>
			</div>
		</div>
		<router-view/>
	</div>
</template>

Login.vue

<template>
	<div>
		<h1>登录页面</h1>
		<button @click="onLogin">登录</button>
	</div>
</template>

<script>
import {asyncRoutes} from '../router';
export default {
	methods: {
		onLogin() {
			this.$store.commit('login');
			//根据是否登录动态添加路由。
			//可进行拓展成自己需要的，如根据角色添加不同的路由
			this.$router.addRoutes(asyncRoutes);
		}
	}
}
</script>

其余页面根据自身需要进行添加。有什么问题下方留言，大家一起讨论呀~