VueRouter默认路由详解

一、VueRouter默认路由显示不出东西

当我们在Vue项目中使用VueRouter时，会发现直接访问首页的时候并没有任何东西显示出来，这是因为默认情况下，VueRouter需要依赖于两个配置文件：

• router/index.js 用于配置VueRouter路由
• App.vue 用于引入VueRouter路由配置

在这两个文件都被正确配置以后，我们才能看到页面上正常的内容显示。

二、Vue默认路由

当我们创建一个新的Vue项目的时候，默认情况下，Vue会自动为我们创建一个路由文件并进行配置。这个路由配置文件主要包括：

• / 路径对应的组件：src/views/Home.vue
• /about 路径对应的组件：src/views/About.vue

三、VueRouter路由的作用

VueRouter的主要作用是在Vue项目中实现客户端路由的跳转以及管理。它能够监听浏览器URL地址的变化，并将变化反映到Vue组件中，从而实现局部刷新的效果。

四、VueRouter的路由模式

VueRouter有两种路由模式：hash和history。默认情况下，VueRouter的路由模式是hash模式，它将路由信息保存在URL地址的#后面。

如果我们想要改变VueRouter的路由模式，可以在router/index.js文件中进行如下配置：

  import { createRouter, createWebHistory } from 'vue-router'
  
  const router = createRouter({
    history: createWebHistory(),
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  })

  export default router

以上配置表示将VueRouter的路由模式改为history模式。

五、VueRouter动态添加路由

除了在router/index.js中静态配置路由信息以外，我们还可以在Vue组件中动态添加路由。

在Vue组件中动态添加路由的代码如下：

  import { useRouter } from 'vue-router'

  const router = useRouter()

  function addRoute() {
    router.addRoute({
      path: '/dynamic-route',
      component: DynamicRoute
    })
  }

以上代码表示在/dynamic-route路径下动态添加一个组件DynamicRoute作为路由。

六、路由器默认mercury

除了VueRouter默认的hash模式和history模式以外，还有一个名为mercury的路由模式。

我们可以在router/index.js中进行如下配置，即可将VueRouter的路由模式改为mercury模式：

  import { createRouter, createMemoryHistory } from 'vue-router'

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

  export default router

七、VueRouter路由跳转

VueRouter提供了两种方式进行路由跳转：

• router-link标签在template中，用于生成可点击的链接
• router.push方法在JS代码中，用于编程式地进行路由跳转

路由跳转的代码示例：

  <!-- 路由链接 -->
  <router-link to="/">首页</router-link>

  <!-- JS代码中的路由跳转 -->
  function navigateToAboutPage() {
    router.push('/about')
  }

八、VueRouter嵌套路由

VueRouter支持嵌套路由，也就是说一个路由下面还可以有它的子路由。

在router/index.js中进行嵌套路由配置示例：

  const router = createRouter({
    history: createWebHistory(),
    routes: [
      { path: '/', component: Home },
      {
        path: '/about',
        component: About,
        children: [
          { path: '', component: AboutHome },
          { path: 'contact', component: AboutContact },
          { path: 'team', component: AboutTeam }
        ]
      }
    ]
  })

  export default router

以上代码表示在/about路由下面嵌套了三个子路由，分别是/about、/about/contact和/about/team。

九、VueRouter清空路由

我们可以使用router.replace方法来清空路由，代码示例如下：

  const clearRoute = () => {
    router.replace('/')
  }

以上代码表示将路由清空，回到/路径。

十、VueRouter路由模式区别选取

在选择VueRouter的路由模式时，需要根据具体的需求来进行选择。

hash模式适合单页应用，因为在单页应用中，所有页面切换都是在同一个页面内完成的，使用hash模式可以避免在服务器端进行URL地址的配置。

history模式适合支持服务器端渲染的多页应用，因为history模式需要在服务器端进行URL地址的配置。

merucry模式主要是为了提高性能而创建的，它采用HTML5 PushState来实现路由跳转，相比于hash模式和history模式，可以提供更好的性能和更好的用户体验。