修改vue的端口号
在config下面的index.js中调制port的数值,以此来更改端口号。
在同一个webstorm中编译两个项目
File-> Settings -> Directories -> Add Content Root,选择你要加入的Project 点击OK -> Apply -> OK 搞定。
阶段小结
目前routes.js路由的跳转已经完毕。
导航守卫
导航就是我们说的路由,当路由发生变化的时候,我们想要做的事情,这就是导航守卫的重点。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
to,from,next三个参数都是必要的to: 即将要进入的目标 路由对象from: 当前导航正要离开的路由next:一定要调用该方法来 resolve 这个钩子,如果不写next()或者next(false),页面路由不会跳转,也就是页面被阻止在当前页面了to,from是一个对象,就是routes[] 数组里面配置的某个具体的路由对象,
很简单的应用。
router.beforeEach((to, from, next) => {
if (to.path === '/') {
sessionStorage.removeItem('user')
}
let user = JSON.parse(sessionStorage.getItem('user'))
if (!user && to.path !== '/') {
next({ path: '/' })
} else {
next()
}
})
代码如下,在我们项目中,我的首页就是登陆页面。也就是’/'的路径,所以每次进行一次判断。然后这样就相当于权限限制了路由。