vue3中怎么使用router路由呢&页面跳转传参怎么搞呢

描述：

最近想弄一个自己的个人主页，正好vue3也已经出来了，想尝鲜，于是便用vue3来构建了自己的项目，结果处处碰壁，不过这是好事，说明又有很多新的东西学了（等会，我2.x还没学废(ಥ﹏ಥ)）。好的，接下来要分享的是在vue3中要怎么去使用router路由。

---

小提示：

创建vue3项目的命令行依旧没变： vue create "项目名"

如果你在创建vue3项目时选择的是手动选择功能方式，并且把Router勾选了，那么可以直接跳过安装流程，官方模板会搭建好router环境。

如果选择的是默认模板，那么就先按着流程安装搭建完router

---

安装搭建:

vue3的改动较大，所以之前的版本路由已经不适用了，目前直接安装路由是3.x版本的，我们要指定router4进行安装，安装不了就用淘宝镜像。

npm install vue-router@4 --save

router-link的使用好像没啥变化，并且官方的模板里有，我就不说了，需要注意的是使用keep-alive保持路由状态的方式变了：

<!-- vue2 -->
<keep-alive>
  <router-view />
</keep-alive>
<!-- vue3 -->
<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

我们主要来看看页面与页面间的跳转有啥变化，接着我们在src目录下创建router文件夹，在里面新建index.js文件，接着再创建一个views文件夹,在里边创建两vue文件用于页面的跳转A －－▶B

然后我们在router文件夹的index.js文件里添加下面的代码，你会惊奇的发现，Vue对象去哪儿了？在2.x中，我们要使用路由是要先import Vue from 'vue'把Vue引入进来，接着再Vue.use(VueRouter)去初始化使用路由，是的，vue3中已经没有全局的Vue对象了，并且vue-router也变得模块化了，routes引入页面的两种方式没啥改变，倒是history已经模块化了，它有几种方式，我们使用createWebHistory 就好了，就是浏览器URL后面带不带#号小尾巴的区别。

import { createRouter, createWebHistory } from 'vue-router'
import A from '../views/A.vue'

const routes = [
    // { path: "/", redirect: "/index" },
    {
        path: '/',
        name: 'A',
        component: A
    },
    {
        path: '/B',
        name: 'B',
        component: () =>
            import ('../views/B.vue')
    }
]

const router = createRouter({
    //history模式：createWebHistory , hash模式：createWebHashHistory
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

接着在main.js文件里修改添加下面的代码，使用router的话在createApp模块里挂载一下就好了，需要注意的是必须要在mount之前挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

最后在App.vue里面引用一下<router-view/>组件就把环境都弄好了，记得把之前模板自带的东西清理了就好。

<template>
  <router-view/>
</template>

---

使用：

我们先在之前创建的A.vue文件中添加下面代码

<template>
  <div @click="goToB">Page A</div>
</template>
<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const goToB = () => {
      router.push({
        name: "B",
      });
    };
    //也可以这样写
    // function goToB() {
    //   router.push({
    //     name: "B",
    //   });
    // }
    return {
      goToB,
    };
  }
};
</script>

接着在B.vue文件中随便添加点东西，能显示就好

<template>
  <div>Page B</div>
</template>

然后我们再回看A文件，你会发现找不到this.$router.push()，是的，vue3中已经没有全局的路由了，需要使用路由，我需先要引入useRouter模块，接着要在setup函数中定义router，之后再创建一个方法，里面才是我们熟悉的router.push({ name: "B"})，这里不要用this，setup函数中是没有this的，到这里简单的跳转就算完成了。

效果图：

---

❀传参：

接着上面，既然在methods函数里可以调用了setup() 里return的方法，那是不是意味着我们可以传点东西过去？

A.vue文件:

是的，我们可以传参数过去，这样我们就可以把这个自定义的跳转函数封装起来，动态的传入页面名称和参数就好了

<template>
  <div @click="test">Page A</div>
</template>
<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const goToOtherPage = (page_name, value) => {
      router.push({
        name: page_name,
        params: {
          value: value,
        },
      });
    };
    // Composition API 定义methods的方法可以直接写在return之前
    function test() {
      /*
       * do something...
       */
      //要跳转的页面名称
      let page_name = "B";
      //要传的参数
      let value = "hello vue3";
      this.goToOtherPage(page_name, value);
    }
    return {
      goToOtherPage,
      test
    };
  },
//   methods: {
//     test() {
//       /*
//        * do something...
//        */
//       //要跳转的页面名称
//       let page_name = "B";
//       //要传的参数
//       let value = "hello vue3";
//       this.goToOtherPage(page_name, value);
//     },
//   },
};
</script>

B.vue文件:

接着我们要怎么接受参数咧？搞了那么久，其实配方都是一样的，要接受参数，我需要想引入useRoute ，注意是没有r结尾的，是不是有种很熟悉的味道同志们=》this.$route.params，接着也要在setup函数里定义route，接着我们就可以以方法的形式返回params，要使用的话this一下就好了，生命周期函数onMounted里面可以直接拿到。

<template>
  <div>Page B</div>
</template>
<script>
import { onMounted } from 'vue';
import { useRoute } from "vue-router";
export default {
  setup() {
    const route = useRoute();
    const getParams = () => {
      return route.params;
    };
    // Composition API 生命周期写法
    onMounted(() => {
      console.log("mounted:" + getParams().value);
    });
    return {
      getParams,
    };

  },
  //   created: function () {
  //     console.log(`created:` + JSON.stringify(this.getParams()));
  //   },
  //   mounted: function () {
  //     console.log("mounted:" + this.getParams().value);
  //   },
};
</script>

效果图：

---

❀附加题：

在基础页怎么获取router文件夹中index.js里的数据呢？

在vue2.x时，在new实例时可以顺便把数据带上，之后在created或mounted生命周期里直接this.$router.options就可以找到我们传的数据了

const myArr = [1, 2, 3]
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
    myArr
})
export default router

那么在vue3.x中，我们可以在创建路由时把数据带上，

const myArr = [1, 2, 3]
const router = createRouter({
    //history模式：createWebHistory , hash模式：createWebHashHistory
    history: createWebHistory(process.env.BASE_URL),
    routes,
    myArr
})
export default router

之后我们在setup() 函数中使用路由时接收并返回对应的数据，之后就可以在onMounted生命周期中使用了。

import { onMounted } from 'vue';
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    console.log(router.options);
    const myArr = () => router.options.myArr;
    onMounted(() => {
      console.log(this.myArr());
    });
    return {
      myArr
    };
  },
//   mounted: function () {
//     console.log(this.myArr());
//   },
};

成功后打印大概是这个样子：

---

最后别忘了干正事哦！！