Vue 教程(四十四)Vue-router 参数传递

最新推荐文章于 2024-08-08 10:24:48 发布

_否极泰来_

最新推荐文章于 2024-08-08 10:24:48 发布

阅读量480

点赞数

分类专栏： # Vue教程文章标签： vue.js javascript html

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/yuan_xw/article/details/120249214

版权

本文详细介绍了Vue-router的参数传递方法，包括params和query两种类型。通过配置路由，展示了如何在路径中传递和接收params类型的参数，如/router/:id。同时，讲解了query类型参数的传递方式，例如通过查询字符串`?id=...`进行传递，并在组件中获取这些参数的方法。文章最后鼓励读者指正和交流，以共同提升技术能力。

摘要由CSDN通过智能技术生成

Vue 教程(四十四)Vue-router 参数传递

router 传递参数

传递参数主要有两种类型：params、query。

params 类型

配置路由格式:/ router/id
传递的方式:在 path 后面跟上对应的值
传递后形成的路径:/ router/123,/ router/categoryId

在【vuecli2\src\App.vue】中配置

<template>
  <div id="app">
    <!--
      <router-link>:该标签是一个vue-router中已经内置的组件它会被渲染成一个<a>标签
      <router-link>属性：
      tag属性:tag可以指定< router-link>之后渲染成什么组件比如上面的代码会被渲染成一个<li>元素,而不是<a>
      replace属性:<router-link>默认使用HTML5新特性：history.pushState，在标签内添加replace默认，禁止浏览器前进、后退(并不是在所有的浏览器都有效)
      active-cass属性:当< router-ink>对应的路由匹配成功时,会自动给当前元素设置一个 router-link- activel的 class,设置 active-cass可以修改默认的名称
      -->
    <router-link to="/home"
                 tag="button"
                 replace>首页</router-link>
    <router-link to="/about"
                 tag="button"
                 replace>关于</router-link>

    <router-link :to="'/category/'+categoryId"
                 tag="button">分类</router-link>
    <!-- < router-view>:该标签会根据当前的路径,动态渲染出不同的组件-->
    <router-view></router-view>

    <!--
    <button @click="homeClick">首页-按钮click</button>
    <button @click="aboutClick">关于-按钮click</button>
    -->
  </div>
</template>

<script>
export default {
       
  name: 'App',
  data () {
       
    return {
        categoryId: '15865843' }
  },
  methods: {
       
    homeClick () {
       
      console.log('homeClick')
      this.$router.push('/home')
    },
    aboutClick () {
       
      console.log('aboutClick')
      this.$router.push('/about')
    }