vue的路由，以及用路由完成tab切换

最新推荐文章于 2023-11-28 15:04:46 发布

做个前端工程师吧

最新推荐文章于 2023-11-28 15:04:46 发布

阅读量4.3k

点赞数 3

分类专栏： vue 文章标签： vue 路由算法

本文链接：https://blog.csdn.net/qq_44497296/article/details/107557137

版权

本文介绍了如何在Vue项目中配置vue-router，包括安装、创建router.js文件、定义路由、在App.vue及main.js中引入，并展示了如何通过路由实现tab切换功能。在router.js中设置嵌入路由并在组件间切换，通过children属性实现Tab切换。记得在需要使用路由的地方正确引用。

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

1.首先要下载router
在终端上输入 cnpm install vue-router 或者yarn add vue-router 或者npm install vue-router

2.在src文件里创建router.js文件并引入以下代码
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)

3.在src中新建view文件夹，在view新建例如：Home文件夹，在文件夹中新建index.vue，把下面的代码放进去

<template>
  <div id="home">
      <Content />
  </div>
</template>
<script>
  import Content from "../../components/Content.vue"
  export default {
   
    name: "index",
    data(){
   
        return{
   
        }
    },
    components:{
   
        Conten