Vue3全家桶 - VueRouter - 【1】快速使用（创建路由模块 + 规定路由模式 + 使用路由规则 + RouterView-RouterLink）

VueRouter

• Vue-Router官网；
• vue-router 是 vue.js 官方给出的路由解决方案，能够轻松的管理 SPA 项目中组件的切换；
• 安装：yarn add vue-router@4；

快速使用

1.1 创建路由模块

• 在项目中的 src 文件夹中创建一个 router 文件夹，在其中创建 index.js 模块；

• 采用 createRouter() 创建路由，并暴露出去；

• 在 main.js 文件中初始化路由模块 app.use(router)

• 示例代码：

  • router/index.js：

  import { createRouter } from 'vue-router'
  
  // TODO 创建路由
  const router = createRouter({
      // 相关配置
  })
  
  export default router

  • main.js：

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'  // 引入路由模块
  let app = createApp(App)
  
  app.use(router) // 初始化路由插件
  
  app.mount('#app')

1.2 规定路由模式

• hsitory路由模式可采用：
• createWebHashHistory()：hash模式：
  • 它在内部传递的实际URL之前使用了一个哈希字符#；
  • 由于这部分URL从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理；
• createWebHistory()： history模式，推荐使用；
  • 当使用这种历史模式时，URL会看起来很正常（URL中不带#号）；
  • 由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问URL，就会得到一个404错误，要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由，如果URL不匹配任何静态资源，它应提供与你的应用程序中的index.html相同的页面；
• 示例代码：

  • history路由模式：

    import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
    
    // TODO 创建路由
    const router = createRouter({
      // TODO 规定路由模式
      history: createWebHistory(),
    })
    
    export default router

  • hash路由模式：

    import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
    
    // TODO 创建路由
    const router = createRouter({
      // TODO 规定路由模式
      history: createWebHashHistory(),
    })
    
    export default router

1.3 使用路由规则

• routes配置路由规则：

  • path：路由匹配的URL；
  • name：当路由指向此页面时显示的名字；
  • component：路由调用这个页面时加载的组件；

• 路由模块用到的组件：

  • HomeVue.vue：

    <script setup>
    import { ref, reactive, computed, onMounted } from 'vue'
    
    onMounted(() => {});
    </script>
    
    <template>
      <div class="home">
        网站首页界面
      </div>
    </template>
    
    <style scoped>
    .home {
      color: #fff;
      font-size: 24px;
      background-color: #ff0040;
    }
    </style>

  • BlogHomeVue.vue：

    <script setup>
    import { ref, reactive, computed, onMounted } from 'vue'
    
    onMounted(() => {});
    </script>
    
    <template>
      <div class="blog-home">
        博客首页界面
      </div>
    </template>
    
    <style scoped>
    .blog-home {
      color: #fff;
      font-size: 24px;
      background-color: chartreuse;
    }
    </style>

• 创建路由规则数组并使用：

  import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
  
  // TODO 创建路由规则数组
  const routes = [
    {
      path: '/home',
      name: 'home',
      component: () => import('@/views/HomeVue.vue')
    },
    {
      path: '/blog',
      name: 'blog',
      component: () => import('@/views/BlogHomeVue.vue')
    }
  ]
  
  // TODO 创建路由
  const router = createRouter({
    // TODO 规定路由模式
    history: createWebHistory(),
    routes
  })
  
  export default router

1.4 声明路由链接(RouterLink) 和 路由出口(RouterView)

• 在组件模块中声明路由链接和占位符：

  • <router-link></router-link>：路由链接，to 属性则为点击此元素，需要切换的路由地址；

    • 🔺 注意 ：

      • 如果需要配合激活类名使用，需要使用 active-class 进行指定；

      <router-link to="路径" active-class="类名" > xxx </router-link>

  • <router-view />：路由占位符（Vue2中的路由出口），路由切换的视图展示的位置；

• 示例代码：

  • App.vue：（此处有可能URL地址中仍然带有#号，需要重启项目）

    <script setup>
    import { ref, reactive, computed, onMounted } from 'vue'
    
    onMounted(() => {});
    </script>
    
    <template>
    <!-- 路由链接，点击是路由地址会切换到属性 to 的地方 -->
      <router-link to="/home">首页</router-link> | 
      <router-link to="/blog">博客</router-link>
    
      <hr>
    
      <!-- 路由试图，路由切换组件展示的地方，路由出口 -->
      <router-view />
    </template>

• 最终运行展示：