Vue-router路由+导航守卫+mata

一、路由

路由就是路径和组件的映射关系。
在一个页面里, 切换业务场景
单页面 SPA(single page web application) 应用
整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面 ，只会做页面的局部更新
数据需要通过ajax请求获取

二、路由的基本使用

```
<router-link>   to='/user'  切换路由地址
切换路由
<router-view>
存放路由
```
在项目内src文件夹下的router文件夹配置

在App.vue内存放路由

（在别的页面跳转可直接用 <router-link to="/地址">）

三、编程式路由跳转 $router

前进   $router.forward()   $router.go(1)
后退   go(-1)    back()
切换路由    push("/about")
替换路由    replace("/about")

五、路由信息$route

路由参数
params
查询
query
地址
path
全地址
fullPath
名称
name
哈希值
hash

六、路由守卫

全局守卫 - 前置

全局 -后置


router.afterEach((to,from) =>{console.log(to,from)
}

独享路由守卫

     {//这里不用加斜name:'xinwen',path:'news',component:News,meta:{isAuth:true},// 独享路由守卫beforeEnter:(to,from,next)=>{if(to.meta.isAuth){if(localStorage.getItem('school')=== 'aiguigu'){next()}else{alert("请登录")}}}

组件内


// 组件路由// 通过路由规则,进入该组件时被调用beforeRouteEnter(to,from,next){console.log('我进来了',to)},// 通过路由规则,离开该组件时被调用beforeRouteLeave(to,from,next){}

路由元信息

{
path:path,name,component,
meta:{noFooter:true}
}$rouye.meta.noFooter 范围

路由查询参数

传递
next("/login?redirect=/cart"）获取
var redirecr = this.$route.query.redirect||"/user"

Vue-router路由+导航守卫+mata相关推荐

Vue中路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
vue 设置路由导航守卫控制路由跳转
在实际项目中,通常有这样的需求,在用户没有登录的时候通常时不允许访问除了登录页面之外的页面,这个时候就需要使用路由导航守卫来控制跳转了,通常设置如下在router文件夹下的index.js中添加如下 ...
vue 通过路由导航守卫控制访问权限
1.作用:防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限. 2.实现代码 2.1在router/index.js中添加如下代码, const router = new VueRoute ...
Vue——vue3路由导航守卫及其写法
导航守卫:一个页面跳转到另一个页面,中间会触发某个函数导航守卫3个状态 <script> export default {methods: {},beforeRouteEnter () ...
Vue Router 路由导航
Vue Router 通过 Vue.js,我们已经用组件组成了我们的应用.当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们. V ...
Vue - 路由导航守卫控制访问权限，设置 localStorage 过期时间
Vue 路由导航守卫控制访问权限,设置 localStorage 过期时间一. 路由导航守卫二. 路由导航守卫简单使用三. 使用路由导航守卫设置 token 过期时间导航守卫: https: ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
vue3.2使用vue-wechat-title及路由导航守卫实现浏览器动态标题、替换浏览器的vue小图标
文章目录第一篇.浏览器动态标题一.使用vue-wechat-title设置动态标题 1.安装vue-wechat-title 2.main.ts引入插件 3.在router中的index.ts路由 ...
vue路由导航守卫控制访问权限
利用路由的全局前置守卫beforeEach来控制用户的访问权限. 首先是一个登录的页面用户输入完整的信息,点击登录时,会本地存储用户的登录状态,如果在本地存储中存在用户登录过的痕迹,用户可以直接进入 ...
【Vue】vue中的路由导航守卫(路由的生命周期)
文章目录全局前置守卫可选的第三个参数 `next` 全局解析守卫 router.beforeResolve 全局后置钩子路由独享的守卫组件内的守卫可用的配置 API 使用组合 API 完整的 ...

Vue-router路由+导航守卫+mata

一、路由

二、路由的基本使用

三、编程式路由跳转 $router

五、路由信息$route

六、路由守卫

路由元信息

路由查询参数

Vue-router路由+导航守卫+mata相关推荐

最新文章

热门文章