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”的路由。