安装完路由，我们在更目录创建一个router的文件夹，然后在文件夹下面新建一个index.js文件
index.js
import Vue from 'vue' // 引入VUE实例
import VueRouter from 'vue-router' // 引入vue路由
Vue.use(VueRouter) // vue实例调用路由
const routes = [ // 配置路由
{
path: '/', // 进入系统首次加载的路由 一般都是登录页面
redirect: { // 重定向的路由，就是比如更目录是login页面，当登录成功后会自动从定向到Customer路由文件
name: 'Customer'
}
},
{ // 登录页路由配置
path: '/login', // 路由的路径
name: 'Login', // 路由的名称
component: () => import('@/views/login/index') // 路由的文件内容
},
{ // 主页路由配置
path: '/home',
name: 'Home',
component: () => import('@/views/home/index'),
children: [ // 进入主页后首次加载路由页面配置
{
path: '',
redirect: '/customer'
},
{ // 子路由配置
path: '/customer',
component: () => import('@/views/customer/index'),
name: 'Customer'
},
]
}
]
const router = new VueRouter({ // 创建一个路由对象
routes
})
router.beforeEach((to, form, next) => {
// 全局路由守卫，这里路由守卫经常用来判断用户是否登录之内的
// 比如验证一下是否有token登录等信息，如果没有直接退回登录页，如果有就正常跳转
console.log(to, form, next, '1111')
if (to.name === 'Login') {
alert('您不配！')
// 不执行next()方法路由就不会跳转
} else next(); // 执行next()方法，跳转到指定路由页面
})
export default router // 导出路由，直接在main.js里面调用即可
// main.js // 引入路由模块并使用
import router from './router'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在项目中进行路由跳转：
this.$router.push({path: '/login'});