vue-router基本使用

安装依赖包

npm install vue-router

使用vue-router

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router); // 安装路由功能

const router = new Router({ // 创建路由实例
	routes: [
		{
			path: '/', // 首页
			component: () => import('@/view/Home.vue')	
		},
		{
			path: '/login', // 登录页
			component: () => import('@/view/Login.vue')	
		},
		// 子路由与动态路由
		{
			path: 'about', // 关于我的栏目
			meta: {
				isLogin: true	
			},
			component: () => import('@/view/about/Index.vue'),
			// 子路由
			children: [
				{
					path: 'info', // 个人信息页
					component: () => import('@/view/list/components/Info.vue')
				},
				// 动态路由，动态参数获取 this.$route.params.data
				{
					path: 'feedback/:mobile', // 反馈页
					component: () => import('@/view/list/components/Feedback.vue')
				},
			]
		} 
	]
})；

// 导航守卫，用于处理跳转（前/后）需要进行的操作。这里采取beforeEach()演示。
router.beforeEach((to, from, next) => { 
	// to表示要进入的路由，from表示要离开的路由，next有很多意思，next()表示放行，next(false)表示不响应也就是你进不去路由的页面，next(path)表示跳转到path页。
	
	// 模拟登录,假如首页不需要登录，关于我的页面以及它下面所有的页面都需要登录
	const token = false;
	if(!token && to.meta.isLogin) next('/login');
	next();
});

new Vue({
	router, // 挂载到vue实例上。
	render: h => h(App),
}).$mount("#app")

这样会导致mian.js代码比较混乱，可以将代码提取出去再在mian.js文件中引入。
路由的这些知识官方文档讲的很清楚，可以直接转至 vue-router 学习