前端 学习 第四弹(一)

页面跳转(一)

router安装与配置

1.同样的,在控制台切换到项目目录,然后运行npm install vue-router 安装即可。
2.在项目的main.js文件中添加引用import VueRouter from ‘vue-router’ 然后添加 Vue.use(VueRouter)即可(除此方法外应该还可以直接使用全局的script标签进行引用)

需求

昨天已经准备好页面所需要的按钮,标签页,提示框,输入框等基本要素,今天来实现页面间的跳转。
最基本的需求:
1.确认登录账号密码正确后,跳转到首页。
2.若登录账号或密码有误,需要弹出提示框并返回到登录页。
3.点击注册按钮将会跳转到账户注册页面
4.在首页点击修改信息按钮将跳转到信息修改页面

实现

使用按钮监控触发事件一直不能实现页面跳转,我就转为使用router-link切换页面了。不过二者本质相同,关键在配置路径组routes,挂载router这两方面。(尝试了挺久的…)
我把路径组配置在新建文件index.js中,在main.js挂载router,在App.Vue中使用router-link跳转,使用router-view给出渲染位置。
1.创建routes(一组路由)
前端 学习 第四弹(一)

2.创建router,并将router挂载到vue对象上
前端 学习 第四弹(一)
前端 学习 第四弹(一)
3.使用router-view渲染和router-link导航
前端 学习 第四弹(一)