vue Route参数传递和导航守卫

最新推荐文章于 2024-03-31 09:53:43 发布
最新推荐文章于 2024-03-31 09:53:43 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： vue vue.js es6 javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CharLINHeng/article/details/107130288
版权
路由的传递参数

在这里插入图片描述

对于params方式的传递参数，我们已经讲过。现在我们来使用第二种参数方式来进行练习：

  1. 新建Profile.vue组件

    <template>
    <div>
        <h3>通过query来获取 参数 数据</h3>
        <h5>
            {{$route.query}}
        </h5>
    </div>
</template>
<script>
export default {
  name: 'profile',
  data(){
      
  }
}
</script>
<style  scoped>

</style>

  2. 去route的index.js中添加路径

    import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../components/HelloWorld.vue'
// import about from '../components/about.vue'
// import user from '../components/test.vue'
//先使用 vue的uuse来使用vueroute
Vue.use(VueRouter)
//定义route路由
  const routes = [
    {
      path: '/',
      name:'first',
      redirect: '/pagehome'
    },
    {
      path: '/profile',
      component: () => import('../components/Profile.vue')
    },
  {
    path: '/pagehome',
    name: '首页',
    component: () => import('../components/HelloWorld.vue')
  },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   路由懒加载
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
  {
    path: '/about',
    name: '关于',
    component: () => import('../components/about.vue'),
    children:[
      {
        path: 'aboutSub',
        component: () => import ('../components/test2.vue')
      }
    ]

  },
  {
    path: '/user/:userId',
    component: () => import('../components/test.vue')
  }
  
]
//history模式就是我们学的history的go，reward。pushState。replaceState啊等。
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  activeClass: 'changecolor'
})
//导出route组件
export default router

  3. 添加routelink

    ​

    <template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link> -->
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
      <!-- <button @click="gohome">首页</button>
      <button @click="goabout">about</button> -->
      <!-- <router-link to="/pagehome">首页</router-link>  -->
      <!-- <router-link to="/about">关于</router-link>  -->
      <!-- <router-link :to="'/user/'+userid">用户界面</router-link>  -->
      <!-- <router-link>新组件</router-link>  -->
      <router-link :to="{
        path: '/profile',
        query:{
          name: '里巴巴'
          ,age: 22
          ,sex: 1
        }
      }">个人信息</router-link>
    </div>
    <router-view/>

  </div>
</template>
<script>
export default {
    name: 'App'
    ,data(){
      return {
        userid: 'zhangsan1'
      }
    }
}
</script>
<style>
  .changecolor{
    color:red;
  }
</style>

  4. 运行效果

在这里插入图片描述

R o u t e 和 R o u t e r 的 区 别 Route和Router的区别 Route和Router的区别

​ R o u t e 是 处 于 活 跃 的 路 由 ， R o u t e r 是 v u e 使 用 的 模 块 。 具 体 还 得 网 上 找 文 章 对 源 码 进 行 分 析 Route是处于活跃的路由，Router是vue使用的模块。具体还得网上找文章对源码进行分析 Route是处于活跃的路由，Router是vue使用的模块。具体还得网上找文章对源码进行分析

导航守卫

​ 俗称：对来回跳转过程进行监听。就是监听用户点击什么路径，从A跳到B。

案例 点击组件，浏览器需要更新对应页面标题

重点在于代码末尾的 - -使用全局导航守卫。

路由对象中name和meta可以两个选一个，在这里，我选route的name属性。

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../components/HelloWorld.vue'
// import about from '../components/about.vue'
// import user from '../components/test.vue'
//先使用 vue的uuse来使用vueroute
Vue.use(VueRouter)
//定义route路由
  const routes = [
    {
      path: '/',
      redirect: '/pagehome'
    },
    {
      path: '/profile',
      name: '个人简介',
      component: () => import('../components/Profile.vue')
      ,meta: { 
        title: '个人简介'
       }
    },
  {
    path: '/pagehome',
    name: '首页',
    component: () => import('../components/HelloWorld.vue')
    ,meta: { 
      title: '首页'
     }
  },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   路由懒加载
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
  {
    path: '/about',
    name: '关于',
    component: () => import('../components/about.vue'),
    meta: { 
      title: '关于'
     },
    children:[
      {
        path: 'aboutSub',
        component: () => import ('../components/test2.vue')
        ,meta: { 
          title: '关于的子组件'
         }
      }
    ]

  },
  {
    path: '/user/:userId',
    name: '个人中心',
    
    component: () => import('../components/test.vue')
    ,meta: { 
      title: '个人中心'
     }
  }
  
]
//history模式就是我们学的history的go，reward。pushState。replaceState啊等。
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  activeClass: 'changecolor'
})
//使用全局导航守卫
router.beforeEach((to,from,next)=>{
  document.title = to.name;
  next()

})
//导出route组件
export default router

运行结果如下：
在这里插入图片描述

方法2：使用match的数组对象来进行改变值：

//使用全局导航守卫
router.beforeEach((to,from,next)=>{
  // document.title = to.name;
    //使用方法2，从匹配对象中进行获取其标题值
  document.title = to.matched[0].meta.title;
  next()
})

运行效果同上。

在这里插入图片描述

导航守卫可以配置类似拦截器的功能。可以使用前置钩子函数和后置钩子函数进行登入或者权限校验的判断。

使用keep-alive对组件不进行销毁，下面假设先不使用keep-alive进行查看情况，看组件会不会销毁：
在这里插入图片描述

可以看到，当点击其他route时，组件会被销毁。

在加入keep-alive后，app.vue代码如下：

<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link> -->
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
      <!-- <button @click="gohome">首页</button>
      <button @click="goabout">about</button> -->
      <!-- <router-link to="/pagehome">首页</router-link>  -->
      <!-- <router-link to="/about">关于</router-link>  -->
      <!-- <router-link :to="'/user/'+userid">用户界面</router-link>  -->
      <!-- <router-link>新组件</router-link>  -->

        <router-link :to="{
        path: '/profile',
        query:{
          name: '里巴巴'
          ,age: 22
          ,sex: 1
        }
      }">个人信息</router-link>
    
    </div>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>
<script>
export default {
    name: 'App'
    ,data(){
      return {
        userid: 'zhangsan1'
      }
    }
}
</script>
<style>
  .changecolor{
    color:red;
  }
</style>

运行效果如下：

在这里插入图片描述

可以看到，首页组件保持了活跃状态。

keep-alive常用属性：

在这里插入图片描述

指定一些组件不缓存或者缓存，使用：

修改profile组件代码：

<template>
    <div>
        <h3>通过query来获取 参数 数据</h3>
        <h5>
            {{$route.query}}
        </h5>
    </div>
</template>
<script>
export default {
  name: 'profile'
  ,beforeCreate () {
    console.log("proifle被创建")
  } 
  ,beforeDestroy () {
    console.log("profile组件被销毁")
  }
}
</script>
<style  scoped>

</style>

修改app.vue

<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link> -->
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
      <!-- <button @click="gohome">首页</button>
      <button @click="goabout">about</button> -->
      <!-- <router-link to="/pagehome">首页</router-link>  -->
      <!-- <router-link to="/about">关于</router-link>  -->
      <!-- <router-link :to="'/user/'+userid">用户界面</router-link>  -->
      <!-- <router-link>新组件</router-link>  -->

        <router-link :to="{
        path: '/profile',
        query:{
          name: '里巴巴'
          ,age: 22
          ,sex: 1
        }
      }">个人信息</router-link>
    
    </div>
    <keep-alive exclude="profile">
      <router-view/>
    </keep-alive>
  </div>
</template>
<script>
export default {
    name: 'App'
    ,data(){
      return {
        userid: 'zhangsan1'
      }
    }
}
</script>
<style>
  .changecolor{
    color:red;
  }
</style>

运行：

在这里插入图片描述

可以看到，虽然我们使用了keep-alive,但是已经将profile组件排除在外了，不对此组件进行缓存。

码农藏经阁
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router路由守卫 、路由传参 及 使用，Comming！
tendernessxy的博客
10-28 1510
vue-router路由守卫 、路由传参 及 使用，Comming！
Vue路由守卫之路由独享守卫
10-16
Vue Router 提供了多种类型的路由守卫，包括全局前置守卫、组件内守卫和路由独享守卫。在本例中，我们将重点讨论路由独享守卫 `beforeEnter`。 `beforeEnter` 是一个可以在路由配置中直接定义的守卫函数，用于在...
Vue-路由-传递参数-$route-$router-导航守卫-beforeEach
超级氯化钾的博客
04-24 593
传递参数 两种方式：params和query params的类型 * 配置路由格式： `/router/:id` * 传递的方式：在path后面加上对应的值 * 传递后形成的路径：` /router/123`, `/router/abc` 1.首先编写User.vue组件 2. App.vue 有一个router-link :to="'/user/'+userId"，界面链接显示 3. router->index.js 配置/user/:id 路由映射方式,这样就根据userid映射成功了 4.
vue路由守卫和路由传参详解
weixin_51855875的博客
04-14 687
路由守卫、路由传参
Vue路由导航守卫
最新发布
qq_68695044的博客
03-31 903
Vue路由导航守卫是Vue Router提供的一种机制，它可以让你在路由跳转之前或之后执行一些自定义逻辑，例如：鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫。Vue路由导航守卫是Vue Router提供的一种机制，可以让你在路由跳转之前或之后执行一些自定义逻辑，例如：鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫，每种守卫都有自己的使用场景。在使用守卫时，需要注意它们的执行顺序和next函数的使用，避免出现无限循环的情况。
Vue路由守卫的三种方式，及其钩子函数和参数
chenxiaoyu97的博客
07-05 6604
1）、全局守卫 全局守卫有前置守卫和后置守卫，是vueRouter对象的两个钩子函数，分别是 beforeEach和afterEach。 ​ 前置守卫： router.beforeEach((to, from, next) => { // to: 目标路由 // from: 当前路由 ​ // next() 跳转 一定要调用 next(false);//不让走 next(true);//继续前行 next('/login')//走哪
VUE3----Vue Router 4.x 路由守卫
王延朕的博客
04-12 1677
全局路由守卫与独享路由守卫 import {createRouter, createWebHashHistory} from "vue-router"; const routes=[ { path:'/home', component:()=>import('@/pages/home'), meta:{ isAuth:true, title:'首页' }, }, {
Vue VueRouter、路由的使用、路由守卫(笔记)
weixin_60547084的博客
04-22 2805
文章目录1. 单页面应用(SPA)2. 路由的理解2.1 什么是路由2.2 路由分类3. 路由的安装与搭建4. 路由的使用4.1 基本使用4.2 嵌套(多级)路由4.3 路由传参5. 路由命名与元信息5.1 命名路由5.2 路由元信息6. 路由的props配置7. 编程式路由导航8. 缓存路由组件9. 路由守卫9.1 路由配置信息9.2 全局路由守卫9.3 路由独享守卫9.4 组件内的守卫9.5 完整的导航解析流程10. 路由器的两种工作模式11. 路由懒加载 1. 单页面应用(SPA) SPA (sin
vue-router权限控制(简单方式)
10-17
为了实现这些目标，我们可以利用 Vue 组件的生命周期方法和 Vue Router 的导航守卫。在组件的 `mounted` 钩子中，我们可以进行权限检查，如： ```javascript mounted () { if (!this.check_user_privilege ...
Vue-router的使用和出现空白页,路由对象属性详解
10-18
7. **`fullPath`**：包含了查询参数和哈希的完整路径。 此外，Vue-router 提供了一些有用的导航方法： 1. **`this.$router.push`**：用于导航到新的路由。 2. **`this.$route.go`**：根据给定的数值前进或后退若干...
vue路由传参三种基本方式详解
10-15
### 方案二：通过`name`和`params`传递参数 如果你不想在URL中显示参数，但希望使用路由的名称，可以使用`name`属性，同时通过`params`传递参数。在父组件中： ```javascript this.$router.push({ name: '...
vue前端面试题目精简
10-23
使用`watch`对象监听`$route`对象，或者在组件的`beforeRouteUpdate`导航守卫中处理。 13. **捕获错误信息**： 使用`errorHandler`全局错误处理器，或在组件内使用`try-catch`语句。 14. **slot的使用**： 内容...
【Vue3】Vue Router4路由的配置
杜小舟的博客
11-24 3001
vue-router4安装、配置、使用
vue3 之 vue-router 路由配置、导航守卫，路由跳转、路由参数传递及获取
赵花花的博客
07-04 4413
vue3.x vue-router 路由配置，导航守卫，路由跳转，路由传参及参数获取
vue-router参数传递、全局导航守卫、vue-router-keep-alive、Promise的使用
骨子里的偏爱
06-06 354
vue-router参数传递、全局导航守卫、vue-router-keep-alive、Promise的使用
vue router添加自定义参数
mrliucx的博客
04-09 2559
通常需要在router里面添加参数用于特定的场景，但是官方提供的API只给出几个参数 在meta里面自定义添加参数即可 动态参数需要在动态路由里添加 取值从meta中取值即可
【vue其他相关】路由相关方案：如何统一给所有路由加上参数、参数改变后如何触发组件切换
庞囧的博客
05-07 2855
文章目录问题场景beforeEach全局守卫底层函数劫持 问题场景 可能有些情况，我们需要路由从上游链带参数一直传下去，所以全局的路由需要动态自动添加固定参数。 beforeEach全局守卫 const query = { id: ‘1’ } //这是全局需携带的参数 router.beforeEach((to,from,next)=>{ to.query.id ? next() : next({…to.query, …query}) //这句条件判断有一层的用意是，如果第一次加了参数后，会再次触
Vue路由添加公共参数
Mervyn的博客
03-25 2907
Vue路由添加公共参数 如Vue-Router介绍所说，router.beforeEach是路由跳转前的钩子，需要增加公共参数可以在这里处理。 In that case, you must call next exactly once in any given pass through a navigation guard. router.beforeEach中第三个参数next，必须在每一种给定的导航中严格执行一次。 执行分两种情况 next()，这种情况不再执行前置钩子 next('/')，这种情
Vue路由Vue Router创建、传递参数、路由守卫
DOM曼珠沙华的博客
04-01 2398
使用路由前先需要安装vue-router： 命令为：npm install veu-router --save 1.路由创建： 需要提供的配置文件：在项目的src目录下创建router.js文件，也可以直接添加进App.vue。如果选择配置router.js文件，需要将其导入App.vue内。 在使用前需要导入vue-router并进行使用。 importRout...
vue route功能介绍
05-13
Vue Router是Vue.js官方提供的...5. 导航守卫：可以在路由跳转前、后或者取消时执行一些逻辑，例如验证用户登录状态等。 通过Vue Router的这些功能，我们可以方便地实现前端路由的功能，从而提升用户体验和页面性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值