vue默認路由詳解

一、vue默認路由模式

Vue路由提供了兩種模式：history和hash。默認情況下，Vue路由採用的是hash模式，即在URL後加入 # 號來實現。而history模式則是依賴HTML5 History API，可以在不刷新頁面的情況下改變URL。Vue路由在創建時可以通過mode選項來設置路由模式。

// 創建路由實例
const router = new VueRouter({
    mode: 'history', // 設置路由模式為history
    routes: [ ... ] // 路由配置
})

二、vue路由默認頁面

在Vue路由中，能夠通過配置路由表來將指定路徑映射到指定的組件上。但是，在打開應用時默認情況下要載入的頁面是哪個？

默認情況下，Vue路由會將訪問根路徑 「/」 映射到名為「Home」的組件。我們可以在路由表中配置默認路由，來指定應用啟動時載入的頁面。

const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: Home // 配置默認路由，映射到名為 「Home」的組件上
        },
        {
            path: '/about',
            component: About
        }
    ]
})

三、vue默認路由首頁

首頁對於一個Web應用來說，是最重要的界面之一。在Vue路由中，如何將應用默認路由設置為首頁呢？其實很簡單，在路由表配置中將路徑設置為根路徑即可實現。

// 路由配置
const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: Home,
            meta: {
                title: '首頁' // 配置路由元信息，用於設置頁面標題
            }
        },
        {
            path: '/about',
            component: About,
            meta: {
                title: '關於'
            }
        }
    ]
})

四、vue動態修改默認路由

Vue路由提供了一個名為「push」的方法，通過調用該方法可以實現動態修改當前路由信息，並且可以同步更新瀏覽器地址欄。

// 通過 programmatic navigation 來修改路由
this.$router.push({
    path: '/user/profile'
})

五、vue默認路由配置

Vue路由的配置是極其靈活的，可以滿足大多數應用的需求。在配置路由時，可以設置路由路徑、映射的組件、路由元信息、重定向等。下面是一個路由配置的例子：

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: '/home', // 重定向
            component: Layout, // 嵌套路由
            children: [
                {
                    path: 'home',
                    component: Home,
                    meta: {
                        title: '首頁',
                        auth: true
                    }
                },
                {
                    path: 'about',
                    component: About,
                    meta: {
                        title: '關於'
                    }
                }
            ]
        },
        {
            path: '/login',
            component: Login
        },
        {
            path: '*',
            component: NotFound
        }
    ]
})

六、vue路由默認載入子路由

有時候我們需要在組件內部設置子路由，可以實現程序的模塊化和組件復用。在Vue路由中，可以通過設置子路由來實現這一功能。要想實現默認載入子路由，可以在父組件中將其子路由中的重定向設置為默認路由。

const router = new VueRouter({
    routes: [
        {
            path: '/user',
            component: User, // 父組件
            children: [
                {
                    path: '', // 默認子路由
                    redirect: 'profile'
                },
                {
                    path: 'profile', // 子路由1
                    component: Profile
                },
                {
                    path: 'agenda', // 子路由2
                    component: Agenda
                }
            ]
        }
    ]
})

七、vue默認路由怎麼配置

在Vue項目中，配置默認路由被認為是很常見的需求。在路由表中設置默認路由非常簡單，只需要將路由路徑設置為根路徑即可。

const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: About
        }
    ]
})

八、vue默認路由進登錄

有時候我們需要將用戶的默認路由設置為登錄頁面，以實現跳轉方便和用戶友好的設計。下面是一個實現這一功能的代碼片段：

const router = new VueRouter({
    routes: [
        {
            path: '/',
            redirect: '/login' // 重定向到登錄頁面
        },
        {
            path: '/login',
            component: Login
        },
        {
            path: '/home',
            component: Home
        }
    ]
})

九、vue router 默認路由

在Vue路由中，我們可以設置默認路由。其實，如果路由表中沒有匹配到任何路由，Vue會默認展示第一個載入的路由。因此，命名路由可以被看作是默認路由，如下：

const router = new VueRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        },
        {
            path: '*',
            redirect: { name: 'home' } // 默認路由 
        }
    ]
})

當用戶訪問路由表中不存在的路徑時，該路由會重定向到名為「home」的路由。