vue-cli中路由（vue router）基本使用

最新推荐文章于 2024-05-09 09:21:53 发布

乒乒乓乒乓

最新推荐文章于 2024-05-09 09:21:53 发布

阅读量404

点赞数

分类专栏： web学习文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_44017357/article/details/114479468

版权

本文介绍了Vue Router，它是Vue.js官方的路由管理器，与Vue.js深度集成。通过它，我们可以方便地实现页面间的跳转。在创建的vue-cli项目中，我们会在components目录下创建ResoureVue和select两个组件，并进行相应的配置。最后运行项目，展示路由功能的工作效果。

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

1. 什么是vue路由

vue router是vue.js官方发路由管理器，它和vue.js深度集合

我们可以简单的将路由理解为从一个页面跳转到另一个页面中

2.vue 路由的使用

建立vue-cli脚手架，在components中创建

（1）ResoureVue.vue

<template>
  <button @click="change"> 验证路由传参</button>
</template>

<script>
export default {
    data () {
        return {
            id:45
        }
    },
    methods: {
        change(){
            this.$router.push({//函数式路由
                path:'/select',
                query:{
                    id:this.id
                }
            })
        }
    }
}
</script>

<style>

</style>

（2）select.vue