Java登陸第三十九天——Router路由入門

rowbed發表於2024-04-06
Java路由
什麼是路由？
	類似於Servlet的對映路徑。
	路由可以讓，不同的URL展示不同的頁面。

Router

Router是Vue衍生的生態系統之一，所以需要單獨安裝。

路由案例需求

image

1 安裝依賴

還記得npm安裝依賴指令嗎？看這。

npm i vue-route

1-1 編寫元件

略

2 編寫路由配置

類似於Servlet的對映路徑，需要在檔案中編寫路由配置資訊。

2-1 建立src\router\testRouter.js

testRouter.js儲存的就是路由配置資訊。

/*
從vue-route中匯入兩個函式。
createRouter()建立路由物件。
createWebHashHistory()建立路由歷史記錄物件。
 */
import {createRouter, createWebHashHistory} from 'vue-router'
import Left from '../components/left.vue'
import Right from '../components/right.vue'

//傳遞一個匿名物件傳參
const testRouter = createRouter({
    //history物件
    history: createWebHashHistory(),
    /*
    routers是一個陣列，陣列內是元件與對映路徑物件。
        鍵path的值是對映路徑URL，鍵component的值是元件名。
     */
    routes: [
        {path: '/left', component: Left},
        {path: '/right', component: Right}
    ]
});
//預設匯出，在需要的地方匯入該配置檔案即可。
export default testRouter;

2-2 main.js中繫結路由物件。

import {createApp} from 'vue'
import App from './App.vue'
//匯入路由物件
import testRouter from './router/testRouter'

let app = createApp(App)
//繫結路由物件
app.use(testRouter)
//掛載試圖
app.mount("#app")

3 在元件中編寫路由對應展示位置。

提供了兩個雙標籤：<router-view>和<router-link>

語法格式如下：

<!-- router-view標籤寫在哪，哪裡就是被對映的元件。-->
<router-view></router-view>

<!-- router-link標籤負責跳轉到某個元件。 -->
<router-link to="路徑地址"></router-link>

3-1 編寫APP.vue

App.vue

<script setup>
</script>

<template>
  <router-link to="/left">左</router-link> 丨
  <router-link to="/right">右</router-link>
  <router-view></router-view>
  <h3>APP尾部</h3>
</template>

<style scoped>
</style>

效果展示
image

路由是非常重要，也非常厲害的功能。

相關文章