	import { createApp } from 'vue'
	import App from './App.vue'
	import router from './router'
	import naive from 'naive-ui'
	createApp(App).use(router).use(naive).mount('#app')

3.固定路由跳轉(zhuǎn)

使用場(chǎng)景跳轉(zhuǎn)到Index頁面或者Login頁面

這種場(chǎng)景下的路由一般是固定的，不需要從data(){}或者setup函數(shù)

里面返回動(dòng)態(tài)數(shù)據(jù)

<!-- 在Vue3.x中，根元素可以不為一個(gè)，在template下可以有多個(gè)根節(jié)點(diǎn)
，所以<div id="app">不一定要按照官方示例去寫 -->
<div id="app">
  <p>
    <!--使用 router-link 組件進(jìn)行導(dǎo)航 -->
    <!--通過傳遞 `to` 來指定鏈接 -->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 當(dāng)你點(diǎn)擊 Go to Home這個(gè)超鏈接后，下面這個(gè)router-view
  元素會(huì)渲染路由“/”里面對(duì)應(yīng)的組件，如果你想要把當(dāng)前頁面全部都變更渲染
  那么你的router-view應(yīng)該在當(dāng)前組件的父組件上聲明。-->
  <router-view></router-view>
</div>

4.動(dòng)態(tài)路由跳轉(zhuǎn)

在項(xiàng)目多這種場(chǎng)景用到的比較多

定義想要跳轉(zhuǎn)的路由，我定義為menus，至少應(yīng)該擁有屬性key和to，key是為了在說明渲染超鏈接時(shí)，超鏈接的文字內(nèi)容，to是為了定義你要跳轉(zhuǎn)到哪個(gè)路由。

<script>
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const menus = [
      { key: "首頁", to: "Index" },
      { key: "商品清單", to: "ItemList" },
      { key: "提交歷史", to: "History" },
    ];
    return {
      menus,
    };
  },
});
</script>

在模板中需要對(duì)數(shù)據(jù)做如下解析，這樣最終在視圖上才能正確渲染。

? ? <div id="app">
? ? ? <!-- 在這里我使用的NaviueUI,如果你用的elementUI道理差不多，
? ? ? ?可以忽略n-button這個(gè)標(biāo)簽，因?yàn)槭荱I框架提供的。 -->
? ? ? <n-button ?
? ? ? ? color="#b5b7ba"
? ? ? ? text
? ? ? ? v-for="(item, index) in menus"
? ? ? ? :key="index"
? ? ? ? class="redTextWithoutUnderline"
? ? ? >
? ? ? <router-link :to="item.to">{{ item.key }} </router-link>
? ? ? </n-button>
? ? </div>

默認(rèn)樣式在跳轉(zhuǎn)連接的文字下面字體是藍(lán)色的，且?guī)в邢聞澗€。可以使用一下樣式進(jìn)行覆蓋。

<style>
?? ?.redTextWithoutUnderline {
?? ? text-decoration: none;//用于取消超鏈接下劃線
?? ? color:red; //用于設(shè)置超鏈接字體顏色
?? ?}
</style>

2022年03月21日新增路由控制章節(jié)

5. vue-router配置文件

# 這里的coms是給src/components設(shè)置的路徑別名，這個(gè)js文件的路徑為
# 項(xiàng)目根目錄router/index.js
import { createWebHistory, createRouter } from "vue-router";
import Login from "coms/Login.vue";
import Home from "coms/Home.vue";
# 定義具體的路由
const routes = [{
    path: "/login",
    name: "login",
    component: Login,
}, {
    path: "/",
    name: "home",
    component: Home,
}];
# 關(guān)于history mode和 hash mode差異請(qǐng)看文末官方文檔
const router = createRouter({
    history: createWebHistory(),
    routes: routes,
});
#路由守衛(wèi)，實(shí)現(xiàn)未登錄的用戶他跳轉(zhuǎn)到login頁面
router.beforeEach((to, from, next) => {
    var uid = window.sessionStorage.getItem('uuid');
    if (to.name !== "login" && !!!uid) {
        next({ name: 'login' })
    } else {
        next()
    }
})
#暴露路由組件
export default router;

6.在代碼中控制路由跳轉(zhuǎn)

例如在登錄成功后跳轉(zhuǎn)到首頁，這個(gè)邏輯應(yīng)該如何實(shí)現(xiàn)呢？

<script>
//無需解釋，引入vue-router組件
import { useRouter } from "vue-router";
 setup() {
   //獲取router的引用
   const router = useRouter();
   function verifyUserName() {
      verifyUserNameAPI(loginForm)
        .then((res) => {
          if (res.code === 0) {
            console.log("登錄成功")
          } else {
              console.log("登錄失敗")
            });
            //replace會(huì)清除router棧的歷史記錄
            //即無法點(diǎn)擊返回按鈕，這里指的是跳轉(zhuǎn)到home組件
            //這里名稱為home的組件可以不在當(dāng)前腳本中import
            router.replace({ name: "home" });
          }
        })
        .catch((err) => console.log(err));
    }
    return {verifyUserName,}
}
</script>

參考連接：Vue-Router路由模式

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: