用項目詳細講講vue3路由

1.【對路由的理解】

Vue Router 是 Vue.js 官方的路由管理器，它用于構建單頁面應用（SPA），允許我們在不同的頁面間進行導航，而無需刷新整個頁面。

路由配置文件代碼如下：

import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        }
    ]
})
export default router

main.ts代碼如下：

import router from './router/index'
app.use(router)

app.mount('#app')

App.vue代碼如下

<template>
  <div class="app">
    <h2 class="title">Vue路由測試</h2>
    <!-- 導航區 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首頁</RouterLink>
      <RouterLink to="/news" active-class="active">新聞</RouterLink>
      <RouterLink to="/about" active-class="active">關于</RouterLink>
    </div>
    <!-- 展示區 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
  import {RouterLink,RouterView} from 'vue-router'  
</script>

2. 【兩個注意點】

路由組件通常存放在pages 或 views文件夾，一般組件通常存放在components文件夾。

通過點擊導航，視覺效果上“消失” 了的路由組件，默認是被卸載掉的，需要的時候再去掛載。

3.【路由器工作模式】

3.1 history模式（不帶#）

優點：URL更加美觀，不帶有#，更接近傳統的網站URL。

缺點：后期項目上線，需要服務端配合處理路徑問題，否則刷新會有404錯誤。
const router = createRouter({
    history:createWebHistory(), //history模式
    /******/
})

3.2 hash模式（帶#號）

優點：兼容性更好，因為不需要服務器端處理路徑。

缺點：URL帶有#不太美觀，且在SEO優化方面相對較差。

const router = createRouter({
    history:createWebHashHistory(), //hash模式
    /******/
})

4.【to的兩種寫法】

<!-- 第一種：to的字符串寫法 -->
<router-link active-class="active" to="/home">主頁</router-link>

<!-- 第二種：to的對象寫法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

5. 【命名路由】

作用：可以簡化路由跳轉及傳參。

給路由規則命名：自定義

routes:[
  {
    name:'zhuye',
    path:'/home',
    component:Home
  },
  {
    name:'xinwen',
    path:'/news',
    component:News,
  },
  {
    name:'guanyu',
    path:'/about',
    component:About
  }
]

跳轉路由：

<!--簡化前：需要寫完整的路徑（to的字符串寫法） -->
<router-link to="/news/detail">跳轉</router-link>

<!--簡化后：直接通過名字跳轉（to的對象寫法配合name屬性） -->
<router-link :to="{name:'guanyu'}">跳轉</router-link>

6. 【嵌套路由】

編寫News的子路由：Detail.vue
配置路由規則，使用children配置項：

const router = createRouter({
  history:createWebHistory(),
    routes:[
        {
            name:'zhuye',
            path:'/home',
            component:Home
        },
        {
            name:'xinwen',
            path:'/news',
            component:News,
            children:[
                {
                    name:'xiang',
                    path:'detail',
                    component:Detail
                }
            ]
        },
        {
            name:'guanyu',
            path:'/about',
            component:About
        }
    ]
})
export default router

　　3.跳轉路由（記得要加完整路徑）：

<router-link to="/news/detail">xxxx</router-link>
<!-- 或 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>

　　4.記得去Home組件中預留一個<router-view>

<template>
  <div class="news">
    <nav class="news-list">
      <RouterLink v-for="news in newsList" :key="news.id" :to="{path:'/news/detail'}">
        {{news.name}}
      </RouterLink>
    </nav>
    <div class="news-detail">
      <RouterView/>
    </div>
  </div>
</template>

posted @ 2024-08-05 20:00 最小生成樹閱讀(331) 評論(0) 收藏舉報

刷新頁面返回頂部

zx618