(四) Vue 相关的路由配置（及子路由配置）

 (四) Vue 相关的路由配置（及子路由配置）

路由跳转的几种方式(四.2) https://www.cnblogs.com/tcz1018/p/13092500.html

1. 首先明确一点  在书写之前尽量保持相关的文件知道含义 比如 components 啥的 知道是要放什么东西

这里把路由的文章提前了 ，是觉得到这里应该对项目有一些整体的理解， 所以才提前可能有的人立即路由的概念 ， 其实你在写原声的时候跳转页面用的是<a>标签 ，但是在实际上比较乱 ，不方便 ，所以使用路由整个提出来， 进行规划， 方便使用

在src里面创建相应的文件夹进行存放  

2.路由配置
          首先在页面打开时候都是进入的 APP.vue (PS 我是初学 是这么理解的 有错请见谅) 这是最大的应该 

​

意思就是说 在显示里面都是直接从这走的  要想显示其他的就去路由重定向 我想显示我的登录页面 就会去路由里面改了

 

配置路由

​

注释里面写的比较明白  就是直接在声明好路径之后  直接修改目录文件  重定向直接路由
显示自己相应的页面

子路由配置：

   我是看的这个文章  感觉比较好
https://www.cnblogs.com/vickylinj/p/10900349.html

   其实在写的时候 着重理解一下  然后在注意理解细节  流程  就可以了  不难

​

在index 就是显示的vue文件里面是这么写的

​

在页面里面主动跳转页面 要用<router-link></router-link>  注：在上写的那个网址里面 他还写了一个属性就是 Tag="li"其实就是 有li 的特性  前面加了个小黑点

​

 注：路由的写法有两种（不要见了觉得不一样   就是可以直接在下边的{}里面直接指向，然后写路径 。也可以在顶部直接写上import 在下边的{}直接使用）
   举例说明：第一种
​
   举例说明：第二种
​
​

路由导航卫士：

    作用： 就是在你的项目进行路由跳转的时候 进行一些相应的判断，比如判断时候有token

根据官方文档就能看出来相应的操作，这里不说的太多只是判断是否为登陆过   是否过期就要用拦截器  或者你自己在请求的位置写个判断来进行判断

/ 全局前置守卫
  router.beforeEach((to,from,next)=>{
    let token = localStorage.getItem("token")//验证登录状态
    if(token){//判断是否登录
      next()
    }
    else{
      if(to.path!=='/login'){
        alert("请先登录")
        next({path:'/login'})
      }
      else{
        next()
      }
    }
  })

 

还有其他几种相应的路由守卫，在不同的条件下进行相应的判断操作。

404的的页面 

　　　在找不到页面的状态下自动跳到404页面