这里写目录标题

一、路由
- (1)路由的配置
- (2)路由的概念
- - 1、路由的概念
  - - ①参考链接
    - ②路由的使用
    - - 第一步-创建组件
      - 第二步-配置router.js
      - 第三步-配置main.js
  - 2、路由的生命周期跟拦截器
  - - ①参考链接
    - ②个人理解
    - ③拦截器思路分析
    - ④上面的可以忽略--这里拦截代码才是重要
二、嵌套路由
- 嵌套路由描述
- 视觉体验

一、路由

idea创建vue项目：https://blog.csdn.net/qq_45716444/article/details/116771126

(1)路由的配置

这是我上一张写的https://blog.csdn.net/qq_45716444/article/details/116783474

(2)路由的概念

1、路由的概念

①参考链接

https://baijiahao.baidu.com/s?id=1668019099207124126&wfr=spider&for=pc

我觉得从设计的思想上来说路由是一个映射关系，直白来说就是一个url链接对应着一个组件（或多个组件，这个是嵌套路由）。

②路由的使用

要使用路由就先去配置，在上面的链接有配置的方法
路由整体的使用分x步
1、创建组件
2、在router.js中配置
3、配置main.js
4、在App.vue中添加 <router-view></router-view>

第一步-创建组件

创建vue组件，这里在src下面创建一个page文件，然后添加下面三个文件
index.vue|login.vue|register.vue,代码如下

//这是index.vue
<template><div>首页</div>
</template><script>export default {name: "index"}
</script><style scoped></style>

//这是login.vue
<template><div>登录</div>
</template><script>export default {name: "login"}
</script><style scoped></style>

//这是register.vue
<template><div>注册</div>
</template><script>export default {name: "register"}
</script><style scoped></style>

第二步-配置router.js

在src下面创建一个router文件夹，在这个文件夹里面创建一个router.js文件，在
这个文件中写如下代码

//1、引入文件
import VueRouter from "vue-router";
//2、实例化VueRouter对象
const router = new VueRouter({//这个是写映射关系的对象routes:[{path: '/',redirect:'/login'},{//这个是 把/index 与 ./page/index.vue 这个文件对应起来，到时候//在url地址栏直接访问 localhost:8080/index 可以访问到index.vue这个文件path: '/index',component:()=>import("@/page/index")},{path: '/login',component:()=>import("@/page/login")},{path: '/register',component:()=>import("@/page/register")}]
})//3、抛出对象，最后会在main.js中引用
export default router

第三步-配置main.js

在src项目下找到main.js，添加以下代码

//导入路由文件，为了在App.vue中使用<router-view></router-view>
import VueRouter from "vue-router";
Vue.use(VueRouter)
//引入router.js中抛出的路由对象
import router from "@/router/router"
new Vue({render: h => h(App),//最后一定记得把router对象放到这里router
}).$mount('#app')

2、路由的生命周期跟拦截器

①参考链接

https://blog.csdn.net/qq_38128179/article/details/100072962

②个人理解

 这里我针对上面的进行一些总结：路由的生命周期主要分成三大部分，全局守卫/组件
守卫/路由守卫。那什么是全局守卫呢？全局守卫就是在路由开始跳转到结束转的整个过程，这个跳
转，是所有的路由跳转。 也就是说，无论是从首页跳转到登录页，还是注册页跳转到登
录页都会触发全局守卫 对应的函数（钩子函数），我们的重点就是这个过程里面的
beforeEach ，做拦截。那什么是全局守卫呢？顾名思义，那写函数（钩子函数）的作用范围是在单个组件内，也就是在一个Vue的实例中最后一个路由守卫，它的作用域是在路由VueRouter中的routes单个对象中

路由里面的函数为什么叫钩子函数?链接在下面

https://blog.csdn.net/hhtSeeTheWorld/article/details/113525999

③拦截器思路分析

 在写拦截器之前，我们来模拟一个场景。在登录页，我们需要经过登录才能进入
首页，所以在我们没有登录之前，我们就不能访问首页，那这个路由请求是不是得栏
截下来。那我们应该怎么实现呢？我们跳转的时候，是要输入一个url，那我们就检查这个url。如果我们登录了，
就可以进入，如果没有登录就拦截。所以，我们要判断url吧，要判断是否登录吧。
判断url的话，可以来一个白名单（数组存一下不用登录就可以进入的页面路由就行
了）。判断是否登录过，我们可以把登录过的信息存到浏览器缓存中，用到的时候再拿出来就行了。那我们在路由的生命周期中的哪一个过程进行拦截呢？？我们要判断所有的请求，那肯定是在全局中守卫中拦截，也就是说beforeEach |
beforeResolve 两个，为啥是这两个，而不是三个，因为afterEach没有next。那到底要选哪一个？？对比下面那张图，其实会发现。beforeEach | beforeResolve 周期位置不一样，我们
既然要拦截，那被拦截下来的就没必要执行下面的那么多了，直接在beforeEach拦截就行了

④上面的可以忽略–这里拦截代码才是重要

这里我们的重点是要存一个  登录的信息  还有存一个白名单路由

//这个是在 src/router/router.js 中写的代码。注意这个代码是跟上面的连贯下来的，上面的步骤连贯下来的，上面刚刚开始写路由那里
import {Message} from "element-ui"
const notNeedLogin = ["/login"] //白名单，这个/index，在路由配置中有
router.beforeEach((to,from,next)=>{//判断请求路由是否是白名单的，如果不是就返回-1if (notNeedLogin.indexOf(to.path) == -1){//如果路由不是白名单中的，那就判断是否登录，如果每登录就拦截（不执行next()）if(localStorage.getItem('token') == null){next("/login")Message.warning("请登录")}}next()
})

//下面代码放到login.vue中,全部覆盖啊，把login.vue中的内容全部换成下面的就行了
<template><div>登录<el-button @click="token">存token</el-button><el-button @click="l">首页</el-button><el-button @click="r">退出</el-button></div>
</template><script>export default {name: "login",methods:{token(){//把token存到缓存localStorage.setItem("token","sdsd")},l(){this.$router.push('/index')},r(){//把token移除缓存localStorage.removeItem('token')}}}
</script><style scoped></style>

二、嵌套路由

嵌套路由描述

 嵌套路由就是在上面写的一个路由里面再写子路由。然后最终的显示效果是子路由的
页面再加上父路由的页面效果。这里主要是要解决什么问题呢？我们再来描述一下一个场景，当我们主页需要一个布局，而布局是整个主页的重要部
分，然后布局里面的东西是不停的在变化，也就是说，我们有10个页面，都需要到这个
布局。如果使用单路由的话，我们会给每一个组件都复制上重复的代码，就很麻烦，那
我们可不可以利用路由去减少这个代码量呢，答案是可以的。描述是抽象的，下面我们
用视觉来体验一下这个案例

视觉体验

【1】导入element-ui https://blog.csdn.net/qq_45716444/article/details/116783474
【2】主页的布局

//复制到index.vue文件中，index的全部代码
<template><div style="height: 100%">//这个是element组件 https://element.eleme.cn/#/zh-CN/component/container<el-container style="height: 100%"><el-aside width="200px" style="background-color: darkgrey">Aside</el-aside><el-container><el-header style="background-color: #42b983">Header</el-header><el-main style="background-color: #2c3e50">Main</el-main><el-footer style="background-color: skyblue">Footer</el-footer></el-container></el-container></div>
</template><script>export default {name: "index"}
</script>

【3】引入问题我们在src/page下面多创建了r.vue和l.vue，然后我们这些页面都需要index.vue中的布局代码，除了复制粘贴代码可以实现，还有另一种，就是使用嵌套路由。

//l.vue
<template><div><h1 color="red">这个是l页面</h1></div>
</template><script>export default {name: "l"}
</script><style scoped></style>

//r.vue
<template><div><h1 color="white">这个是r页面</h1></div>
</template><script>export default {name: "r"}
</script><style scoped></style>

【4】嵌套路由代码

//代码写在router/router.js中
//2、实例化VueRouter对象
const router = new VueRouter({//这个是写映射关系的对象routes:[{path: '/',redirect:'/login'},{//这个是 把/index 与 ./page/index.vue 这个文件对应起来，到时候//在url地址栏直接访问 localhost:8080/index 可以访问到index.vue这个文件path: '/index',component:()=>import("@/page/index"),//下面这个是嵌套路由children:[{path: '/r',component: () => import("@/page/r")},{path: '/l',component: () => import("@/page/l")}]},{path: '/login',component:()=>import("@/page/login")},{path: '/register',component:()=>import("@/page/register")}]
})

//index.vue的代码，全部代码
<template><div style="height: 100%"><el-container style="height: 100%"><el-aside width="200px" style="background-color: darkgrey"></el-aside><el-container><el-header style="background-color: #42b983"></el-header><el-main>//这个不能拉下<router-view></router-view></el-main><el-footer style="background-color: skyblue"></el-footer></el-container></el-container></div>
</template><script>export default {name: "index"}
</script>

【5】运行效果

3、vue-路由、拦截器和嵌套路由相关推荐

axios请求拦截器、响应拦截器、vue-router路由导航守卫的使用(案例)
axios官方文档一.请求拦截器设置headers,给所有请求加上Authorization:token值二.响应拦截器直接去访问/article,发现可以进入到article内容管理页面原 ...
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页前言问题分析问题解决结语前言众所周知,Vue路由有两种模式,默认hash模式,这种模式下url上会带"#&q ...
ThinkPHP框架路由验证器优先于路由中间件执行的解决方案
ThinkPHP框架路由验证器优先于路由中间件执行的解决方案打个广告先:北京有没有在招PHP的公司,失业中... 前段时间在写项目的时候需求是先验证用户是否登录并且有该接口访问权限然后在验证访问参数 ...
VUE 路径拦截, 开放页面, 基于动态路由, 拦截器
vue 动态路由参考 https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html main.js 只会加载一次, 我们在mia ...
【Vue+axios】登录拦截验证token，路由拦截器
GitHub项目地址:https://github.com/superman66/vue-axios-github/tree/master/src router文件夹中的index.js添加路由权限校 ...
Vue第二部分(4)：嵌套路由和路由传参
嵌套路由实际生活中的应用界面,通常由多层嵌套的组件组合而成.当我们路由到某一个组件后,还经常需要在该组件中继续路由到其子组件,这就需要使用Vue的嵌套路由.比如:当我们路由到登录组件后,又分为手机验 ...
VUE二级/多级路由配置方式（嵌套路由）
二级路由中path写法不同对应router-link标签to属性的不同写法二级路由配置path:"/XXX",path中带/ ,则对应的路由导航router-link中的to属性 ...
Vue axios拦截器使用
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相关知识,需要的朋友可以参考下 axios使用拦截器在请求或响应 ...
vuel路由间通讯_vue嵌套路由之间的通信（非vuex方法实现）
1.先在main.js里生成一个自定义事件 2.这是我路由设置的嵌套路由 3.用法: 父路由接收子路由用自定义事件子路由里的事件绑定 : this.$root.myEvent.$emit(" ...

3、vue-路由、拦截器和嵌套路由

这里写目录标题

一、路由

(1)路由的配置

(2)路由的概念

1、路由的概念

①参考链接

②路由的使用

第一步-创建组件

第二步-配置router.js

第三步-配置main.js

2、路由的生命周期跟拦截器

①参考链接

②个人理解

③拦截器思路分析

④上面的可以忽略–这里拦截代码才是重要

二、嵌套路由

嵌套路由描述

视觉体验

3、vue-路由、拦截器和嵌套路由相关推荐

最新文章

热门文章