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

Posted _否极泰来_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 教程(四十四)Vue-router 参数传递相关的知识，希望对你有一定的参考价值。

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')
    }
  }
}

</script>

<style scoped>
.router-link-active {
  /** 背景颜色 */
  background: #e1251b;
  /** 字体样式 */
  color: #fff;
  /** 无边框 */
  border-style: none;
}
</style>

  1. 配置路由文件【vuecli2\\src\\router\\index.js】
import VueRouter from 'vue-router'
import Vue from 'vue'

/**
 * 路由懒加载：
 * 当打包构建应用时, javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了
 * 懒加载语法：component: () => import('../components/Home')
 */

// 1.注册插件
Vue.use(VueRouter)

// 2. 定义路由
const routes = [
  {
    // 配置默认路径
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    component: () => import('../components/Home'),
    children: [
      {
        path: 'news',
        component: () => import('../components/News'),
      },
    ],
  },
  {
    path: '/about',
    component: () => import('../components/About'),
  },
  {
    path: '/category/:categoryId',
    component: () => import('../components/Category'),
  },
]

/**
 * 3. 创建router实例
 * hash模式（默认）：即地址栏 URL 中的 # 符号,这个#就是hash符号，中文名哈希符或锚点，特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
 * history模式：HTML5 History Interface 中新增的两个神器 pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面，不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就需要前端自己配置404页面。
 */
const router = new VueRouter({
  mode: 'history',
  routes,
})

// 4. 导出router

export default router

  1. 配置接收显示参数
<template>
  <div id="category">
    <h2>分类</h2>
    <span>分类编号：{{categoryId}}</span>
    <span>每日特价|新品首发|鸿雁国际|为你推荐</span>
  </div>
</template>

<script>
export default {
  name: 'Category',
  computed: {
    categoryId () {
      return this.$route.params.categoryId
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

  1. 效果显示

  • query 类型

    配置路由格式：/router，也就是普通配置
    传递的方式对象中使用 query 的 key 作为传递方式
    传递后形成的路径：/router?id=123,/router?id=abc

    1. 添加【User】组件：
    <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-link :to="{path:'/user',query:{name:'zhangsan',age:18,address:'Beijing'}}" 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')
    }
  }
}

</script>

<style scoped>
.router-link-active {
  /** 背景颜色 */
  background: #e1251b;
  /** 字体样式 */
  color: #fff;
  /** 无边框 */
  border-style: none;
}
</style>

  1. 配置路由
import VueRouter from 'vue-router'
import Vue from 'vue'

/**
 * 路由懒加载：
 * 当打包构建应用时, Javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了
 * 懒加载语法：component: () => import('../components/Home')
 */

// 1.注册插件
Vue.use(VueRouter)

// 2. 定义路由
const routes = [
  {
    // 配置默认路径
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    component: () => import('../components/Home'),
    children: [
      {
        path: 'news',
        component: () => import('../components/News'),
      },
    ],
  },
  {
    path: '/about',
    component: () => import('../components/About'),
  },
  {
    path: '/category/:categoryId',
    component: () => import('../components/Category'),
  },
  {
    path: '/user',
    component: () => import('../components/User'),
  },
]

/**
 * 3. 创建router实例
 * hash模式（默认）：即地址栏 URL 中的 # 符号,这个#就是hash符号，中文名哈希符或锚点，特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
 * history模式：HTML5 History Interface 中新增的两个神器 pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面，不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就需要前端自己配置404页面。
 */
const router = new VueRouter({
  mode: 'history',
  routes,
})

// 4. 导出router

export default router

  1. 组件获取参数
<template>
  <div>
    <h2>用户信息</h2>
    <span>{{$route.query}}</span>
  </div>
</template>
<script>
export default {
  name: 'User'
}
</script>

  • 效果显示

    – 以上为《Vue 教程(四十四)Vue-router 参数传递》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

以上是关于Vue 教程(四十四)Vue-router 参数传递的主要内容，如果未能解决你的问题，请参考以下文章

Vue教程(四十一)Vue-router路由初体验

Vue教程(四十一)Vue-router路由初体验

vue2.0使用vue-router传参数

将对象作为参数传递给 router.push (vue-router@4.05)

vue-router怎么给子路由传参

vue-router路由传参