Vue如何实现编程式导航声明方法,前进和后退导航

编程式导航声明方法,前进和后退导航

Vue如何实现编程式导航声明方法,前进和后退导航_第1张图片

 在router中设置路由导航跳转函数

Vue如何实现编程式导航声明方法,前进和后退导航_第2张图片

 只要发生跳转

Vue如何实现编程式导航声明方法,前进和后退导航_第3张图片

导航的声明函数

Vue如何实现编程式导航声明方法,前进和后退导航_第4张图片

 访问控制系统如何形成

Vue如何实现编程式导航声明方法,前进和后退导航_第5张图片

 就这三种

Vue如何实现编程式导航声明方法,前进和后退导航_第6张图片

导航守卫的案例,写一个Main.Vue 和login .Vue

Vue如何实现编程式导航声明方法,前进和后退导航_第7张图片

后台主页

Vue如何实现编程式导航声明方法,前进和后退导航_第8张图片

 如果想要展示后台主页,就用这种方法

Vue如何实现编程式导航声明方法,前进和后退导航_第9张图片

 Vue如何实现编程式导航声明方法,前进和后退导航_第10张图片

 想实现路由跳转,先导入包,再匹配规则,添加后台主页的链接

Vue如何实现编程式导航声明方法,前进和后退导航_第11张图片

 怎么制造密码登录不上,就切换到不同页面

Vue如何实现编程式导航声明方法,前进和后退导航_第12张图片

登录页面登录成功与登录不成功的流程构思

Vue如何实现编程式导航声明方法,前进和后退导航_第13张图片

 to是什么当前将要访问的路径

Vue如何实现编程式导航声明方法,前进和后退导航_第14张图片

 去读token 值,然后去判断是不是token 的

Vue如何实现编程式导航声明方法,前进和后退导航_第15张图片

 如果token有值,直接放行,没有token 值返回登录后台主页

Vue如何实现编程式导航声明方法,前进和后退导航_第16张图片

 下面是这个案例的演示效果,我点了一下,就能够来到登录主页了

Vue如何实现编程式导航声明方法,前进和后退导航_第17张图片

 来到login页面了

Vue如何实现编程式导航声明方法,前进和后退导航_第18张图片

这就是路由访问路由的控制

Vue如何实现编程式导航声明方法,前进和后退导航_第19张图片

 演示实例,点击退出登录页面就能够退出登录了

Vue如何实现编程式导航声明方法,前进和后退导航_第20张图片

 router .Vuejs org是路由的访问的地址

Vue如何实现编程式导航声明方法,前进和后退导航_第21张图片

现在做一个案例

Vue如何实现编程式导航声明方法,前进和后退导航_第22张图片

npm i [email protected] -S

Vue如何实现编程式导航声明方法,前进和后退导航_第23张图片

 使用第一步是创建一个路由模块,然后进行挂载

Vue如何实现编程式导航声明方法,前进和后退导航_第24张图片

导入两个包,new一个实例

Vue如何实现编程式导航声明方法,前进和后退导航_第25张图片

然后共享一下,在main.js中进行挂载一下

Vue如何实现编程式导航声明方法,前进和后退导航_第26张图片

 登录页面是什么,在页面下面有一个login 页面

Vue如何实现编程式导航声明方法,前进和后退导航_第27张图片

 这个组件,我们已经画好了,之后呈现出来

Vue如何实现编程式导航声明方法,前进和后退导航_第28张图片

 导入组件,配置路由规则

Vue如何实现编程式导航声明方法,前进和后退导航_第29张图片

 页面不展示的原因是缺少router —link 

Vue如何实现编程式导航声明方法,前进和后退导航_第30张图片

 如果想要配置重定向

Vue如何实现编程式导航声明方法,前进和后退导航_第31张图片

 点击之后就能够展示登录组件,通过router -link 就能够把页面放在页面进行展示了

 在用户登录页面中饭我们可以进行输入密码和用户名

Vue如何实现编程式导航声明方法,前进和后退导航_第32张图片

 我们在组件中找到MyLogin 定义一下数据变量

Vue如何实现编程式导航声明方法,前进和后退导航_第33张图片

 加一个v-model 进行数据绑定

Vue如何实现编程式导航声明方法,前进和后退导航_第34张图片

 点击重置的时候,将数据进行重置

Vue如何实现编程式导航声明方法,前进和后退导航_第35张图片

 定义reset方法

Vue如何实现编程式导航声明方法,前进和后退导航_第36张图片

 登录页面如何做

Vue如何实现编程式导航声明方法,前进和后退导航_第37张图片

把token存到主页中,跳到后台主页当中

Vue如何实现编程式导航声明方法,前进和后退导航_第38张图片

 我们怎么拿到数据,当我们想通过username ,password,post发送数据给服务器之后

Vue如何实现编程式导航声明方法,前进和后退导航_第39张图片

考虑考虑服务器是返回这些数据

Vue如何实现编程式导航声明方法,前进和后退导航_第40张图片

 token在进行身份认证的时候,Bea...是固定格式,同时空格也是必不可少,这是固定的格式:

你必须要考虑的问题,服务器怎么存储数据,服务器怎么把服务器返回给网页,点击home之后,展示组件

Vue如何实现编程式导航声明方法,前进和后退导航_第41张图片

 点击home可以匹配到相应的路由规则

Vue如何实现编程式导航声明方法,前进和后退导航_第42张图片

 Vue如何实现编程式导航声明方法,前进和后退导航_第43张图片

 一般情况我们会有产品设计图,然后对网站进行复原

Vue如何实现编程式导航声明方法,前进和后退导航_第44张图片

 页面如何进行设计布局

Vue如何实现编程式导航声明方法,前进和后退导航_第45张图片

 后台主页样式的写法

Vue如何实现编程式导航声明方法,前进和后退导航_第46张图片

 点左侧链接,右边展示组件

Vue如何实现编程式导航声明方法,前进和后退导航_第47张图片

 页面主体区域分了两个侧边栏

Vue如何实现编程式导航声明方法,前进和后退导航_第48张图片

 左侧边栏放一个组件,右侧边栏放一个div占位

Vue如何实现编程式导航声明方法,前进和后退导航_第49张图片

样式写法

Vue如何实现编程式导航声明方法,前进和后退导航_第50张图片MyHeader组件登录推出界面

Vue如何实现编程式导航声明方法,前进和后退导航_第51张图片

 绑定事件,清空token然后跳转到登录页面

Vue如何实现编程式导航声明方法,前进和后退导航_第52张图片

bug之直接访问/home也可以实现登录,如何能够解决这个

Vue如何实现编程式导航声明方法,前进和后退导航_第53张图片

左侧每一个tab栏放一个路由链接

Vue如何实现编程式导航声明方法,前进和后退导航_第54张图片

 右侧放一个占位符,这里要使用嵌套路由,因为我们是home子路由中使用嵌套路由的。

Vue如何实现编程式导航声明方法,前进和后退导航_第55张图片

左侧放路由链接右侧放占位符

Vue如何实现编程式导航声明方法,前进和后退导航_第56张图片

 智慧系统构造先想好有多少tabbar

Vue如何实现编程式导航声明方法,前进和后退导航_第57张图片

你可能感兴趣的:(Vue,vue.js,前端,javascript)