Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

基本用法

形式

路由配置

{
  path: '/showMsg/:id',
  component: () => import('../views/showMsg')
}

前端传参

<router-link to="/showMsg/1">分页1</router-link>
<router-link to="/showMsg/2">分页2</router-link>
<router-link to="/showMsg/3">分页3</router-link>

这样，都会跳到同一个组件中去。接下来是传参。

接收参数

可以在信息展示页打印当前的Vue实例，查看信息。

<script>
export default {
  name: "showMsg",
  methods:{
    shows(){
      console.log(this.$route)
    }
  }
}
</script>

可以看见有很多信息，也包括我们传进来的参数。然后我们就可以直接获取。

<template>
  <div>
    <p>这里用来展示信息</p>
    <p>{{ this.$route.params.id }}</p> 
  </div>
</template>

这里只是获取了传过来的 id ，也还可以获取其他信息，可自行尝试。

需要注意的是，这里的 id，是在路由配置中path配置冒号后面的名称，如果名称不是 id ，则获取时用自己配置的名称。

简捷使用

上面的用法中，在获取参数时使用了很长的一串字符，不太方便，此方法就可以不用一长串来获取参数。

形式

路由配置

{
  path: '/showMsg/:id',
  component: () => import('../views/showMsg'),
  props: true
}

前端同上，这里不写了。

组件配置

<script>
export default {
  name: "showMsg",
  props: ['id'], // 这里的id和配置中冒号后面的id要一致
}
</script>

然后就可以直接使用 id 进行获取数据了。

<template>
  <div>
    <p>这里用来展示信息</p>
    <p>{{ this.$route.params.id }}</p>
    <p>{{ id }}</p>
  </div>
</template>

获取查询参数

查询参数：例如，/showMsg/1?name=zs&age=23。其中name=zs&age=23就是查询参数。

前端

<router-link to="/showMsg/1">分页1</router-link>
<router-link to="/showMsg/2">分页2</router-link>
<router-link to="/showMsg/3">分页3</router-link>

获取

console.log(this.$route.query) //获取查询参数
console.log(this.$route.query.age) //获取查询参数中的age值，下同
console.log(this.$route.query.name)

组件传参

这是在新建的Vue项目中，官方使用的一种。

父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld age="23" msg="Welcome to Your Vue.js App"/>
  </div>
</template>

子组件

<h1>{{ msg }}</h1>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    age: String    
  }
}
</script>

字符串转数字

parseInt()
parseFloat()