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

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

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

 只要发生跳转

导航的声明函数

 访问控制系统如何形成

 就这三种

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

后台主页

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

 

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

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

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

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

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

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

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

 来到login页面了

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

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

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

现在做一个案例

npm i vue-router@3.5.2 -S

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

导入两个包,new一个实例

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

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

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

 导入组件，配置路由规则

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

 如果想要配置重定向

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

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

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

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

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

 定义reset方法

 登录页面如何做

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

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

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

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

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

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

 

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

 页面如何进行设计布局

 后台主页样式的写法

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

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

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

样式写法

MyHeader组件登录推出界面

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

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

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

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

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

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