描述：
最近想弄一個自己的個人首頁，正好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的使用好像沒啥變化，并且官方的模闆裡有，我就不說了，我們主要來看看頁面與頁面間的跳轉有啥變化
接着我們在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,
};
},
data() {
return {};
},
methods: {},
};
</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函數裡面調用：
通常我們跳轉都是在處理完了一些事情後再調用的，是以，如果我們想在methods函數裡執行隻需要
this.定義的函數名
就可以了。
<template>
<div @click="test">Page A</div>
</template>
<script>
import { useRouter } from "vue-router";
export default {
setup() {
const router = useRouter();
const goToB = () => {
router.push({
name: "B",
});
};
return {
goToB,
};
},
data() {
return {};
},
methods: {
test() {
/*
* do something...
*/
this.goToB();
},
},
};
</script>
❀傳參：
接着上面，既然在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,
},
});
};
return {
goToOtherPage,
};
},
data() {
return {};
},
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一下就好了，生命周期函數created、mounted裡面都可以直接拿到。
<template>
<div>Page B</div>
</template>
<script>
import { useRoute } from "vue-router";
export default {
setup() {
const route = useRoute();
const getParams = () => {
return route.params;
};
return {
getParams,
};
},
data() {
return {};
},
methods: {},
created: function () {
console.log(`created:` + JSON.stringify(this.getParams()));
},
mounted: function () {
console.log("mounted:" + this.getParams().value);
},
};
</script>
效果圖：
最後别忘了幹正事哦！！