（广州南沙）vue知识点整理2021，主要是防止忘记防备快速翻看

 

 

   ///////////////////////////   vue 中使用路由技巧：router ////////////////////////////////

写笔记说明，之前在江门工作中整理过vue全套笔记，整理了好多经典案例，都是随意记录，由于工作中一段时间在研究java  来到广州后，发现笔记中有些案例居然自己都看不懂，对自己都开始晕了，所以需要认真重做一下笔记，希望自己尽量用心一些，最好是能帮助到别人，让别人也能看懂，那就在好不过了，再者白天工作中也需要整理公司技术文档，正好可以配合好好补一下前端知识，顺便重新整理自己的前端知识体系。

           笔记开始日期2022-7-14

 

+++++++++++++++++++++++++    简介  ++++++++++++++++++++++++++++++++++++++++++++++++++++

通常前端所说的路由是指浏览器请求地址，比如http:127.0.0.1:80/index?id=1  

请求地址又名 url，  一般分为五部份，其中http 名称叫协议；  127.0.0.1  叫地求地址；  80表示端口，备注： 如果端口是80，浏览器可以省略;   index表示资源名;   id表示参数。

 

+++++++++++++++++++++++ +++++++++++++   使用场景      ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

vue3 路由传递参数，在开发的时候有时候需要向另一个页面传入参数，通常有二个方法，简单冒号传参和query对象传参

在实际使用场景中，如果参数少，可以用冒号传参方法，比如只是传入id ,如果参数较多最好用对象方式带参数，用query方式。

 

 

////////////////////////冒号传参方式  示例：////////////////////////////

1，先在路由文件中定义传参：

 {
    path: '/user:id',
    name: 'user',
    component: userindex
  }
]

 

2，   在跳转中带入参数：<router-link :to="'/user' + userid">用户</router-link>

<template>
  <router-link to="/home">首页</router-link>
  <router-link to="/about">关于</router-link>
  <router-link :to="'/user' + userid">用户</router-link>
  <router-view/>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      userid: 'xsy'
    }
  }
}
</script>

　第三步，在目标路由文件中接收并处理参数;　

<template>
  <div>
    <h1>我是用户页</h1>
    <h2>{{$route.params.id}}</h2>
  </div>
</template>

　　//////////////////////////////////////   query 传参方式  ////////////////////////////////////////////////////////

简介使用方法：  

配置路由的时候没有区别，不需要定义，在传参时候加上query作key传递方式，

query方式示例：<routr-link :to ="{path: './profile', query: {name: 'xsy',age:20}}">

最终形成的路由会以？号拼接： http://localhost:8080/#/pro?name=xsy&age=20

总结二种方式传参的形式：

 

<router-link :to="'/user' + userid">用户</router-link>
<router-link :to="{path: '/pro',query:{name: 'xsy',age: 20}}">prow</router-link>

 //////////////////////////////////////////////////////////////   实例  /////////////////////////////////////////////////////////////////////////////////////////////////

功能需求：编写一个点击二个按扭，跳转到另一个地方，并绑定相应参数。

 

                 <button @click = "userClick">  用户  </button>

                  <botton @click = "profile">  档案   </button>

 

编写相应处理事件，根据不同传参方式，编写二种不同的传参风格，核心技术点利用router.push作路由 跳转

方式一     usreclick(){ this,$router.push('user' + this.userid)}

方式二      profile() {this.$router.push({ path:  '/profile', query: {name: 'xsy',  age: 20}  })}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

<template>
  <router-link to="/home">首页</router-link>
  <router-link to="/about">关于</router-link>
<!--  只编写了一个按扭功能-->
  <button @click="text">测试按扭</button>
  <button @click="text1">测试按扭</button>
  <router-view/>
</template>
<script>
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    const router = useRouter()
    const goTob = () => {
      router.push({
        // 下面关于 name: pro 说明用法，其中pro是预先在路由定义定义好的路由名字，在代码中通过name: 指定
        name: 'pro',
        query: {
          name: 'xsy', age: 20
        }
      })
    }
// vue3 中一定要返回函数，否则不能使用
    return { goTob }  }
})
</script>
<style lang="scss">
</style>