vue-router路由传参

àì夳堔傛蜴生んèń 2023-05-29 03:14 57阅读 0赞

vue-router路由传参有两种方法：

1、params传参

2、query传参

用params传参，F5强制刷新参数会被清空，用query传参，由于参数适用路径传参的所以F5强制刷新也不会被清空。（传参强烈建议适用string）

  1. import ArticleIndex from '@/pages/twitter/article/Index';
  2. import ArticleDetailIndex from '@/pages/twitter/article/articleDetail/IndexDetail';
  4. export default new Router({
  5.   routes: [
  6.    {
  7.     path: '/article',
  8.     name: ArticleIndex.name,
  9.     component: ArticleIndex,
  10.     meta: {
  11.       title: '文章管理',
  12.     },
  13.   },
  14.   {
  15.     path: '/article/articledetail',
  16.     name: ArticleDetailIndex.name,
  17.     component: ArticleDetailIndex,
  18.     meta: {
  19.       title: '文章管理',
  20.     },
  21.   },
  22.   ]
  23. })

方法一：

传参： params

  1. this.$router.push({
  2.         name: `ArticleIndex`,
  3.         params: {
  4.           page: '1', code: '8989'
  5.         }
  6.       })

取值： this.route.params

  1. this.code = this.$route.params.code

方法二：

传参：query 

  1. this.$router.push({
  2.         name: `ArticleIndex`,
  3.         query: {
  4.           page: '1', code: '8989'
  5.         }
  6.       })

取值： this.$route.query

  1. this.code = this.$route.query.code

发表评论

表情：
评论列表 （有 0 条评论，57人围观）

还没有评论，来说两句吧...

相关阅读

    相关 VueRouter路由传参

    1. 前言 本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 207 阅读

    相关 vue-03-路由-路由传参

    和平时的页面跳转一样，我们可能需要在地址栏上传递某些参数，例如，从商品列表页面，跳转的某个商品的详情页面，这个时候，如果是页面跳转的时候，我们会直接在url上跟上一个商品id，

    男娘i男娘i/ 0 赞/ 111 阅读