当前位置：首页 > 行业动态 > 正文

vuerouter cdn

admin
行业动态
2025-02-24
1

Vue Router 的 CDN 可以通过引入官方提供的 JavaScript 文件来实现。通过 ` 标签从 CDN 加载 Vue Router：` html，，“这样可以直接在 HTML 文件中使用 Vue Router，无需本地安装。

在前端开发中，使用 Vue Router 结合 CDN 可以快速搭建一个单页面应用（SPA），实现页面的动态路由和组件切换，以下是详细的步骤说明：

1、引入 Vue 和 Vue Router 库

在 HTML 文件中通过 CDN 引入：在 HTML 文件的<head> 或<body> 部分中，添加以下代码来引入 Vue 和 Vue Router 库。

 <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Vue Router with CDN</title>
         <!-引入 Vue -->
         <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
         <!-引入 Vue Router -->
         <script src="https://cdn.jsdelivr.net/npm/vue-router@3/dist/vue-router.js"></script>
       </head>
       <body>
         <div id="app">
           <router-view></router-view>
         </div>
         <script src="app.js"></script>
       </body>
     </html>

解释：这里使用了cdn.jsdelivr.net 作为 CDN 服务来引入 Vue 和 Vue Router 的 JavaScript 文件，确保使用的是适合你项目的版本，例如示例中使用了 Vue 2 和 Vue Router 3 的版本。

2、定义组件

在 JavaScript 文件中创建组件：在app.js 文件中，定义一些简单的 Vue 组件。

 // app.js
     // 定义 Home 组件
     const Home = { template: '<div>Home</div>' }
     // 定义 About 组件
     const About = { template: '<div>About</div>' }

解释：这些组件将在不同的路由下显示，每个组件都是一个简单的对象，包含一个template 属性，用于定义组件的 HTML 结构。

3、配置路由

定义路由规则：在app.js 文件中，创建一个路由数组，其中包含路径和对应的组件。

 // app.js
     // 定义路由
     const routes = [
       { path: '/', component: Home },
       { path: '/about', component: About }
     ]

创建 Vue Router 实例：使用定义好的路由数组来创建 Vue Router 实例。

 // app.js
     const router = new VueRouter({
       routes // (缩写) 相当于 routes: routes
     })

解释：routes 数组中的每个元素都是一个对象，包含path 和component 属性。path 表示 URL 路径，component 表示在该路径下显示的组件。

4、创建和挂载根实例

创建 Vue 实例并挂载路由：在app.js 文件中，创建一个新的 Vue 实例，并将创建好的路由器实例传入。

 // app.js
     // 创建和挂载根实例
     const app = new Vue({
       router
     }).$mount('#app')

解释：这行代码创建了一个 Vue 实例，并将其挂载到 HTML 文件中id 为app 的元素上，将路由器实例传递给 Vue 实例，使整个应用有了路由功能。

5、完整示例代码

HTML 文件：

 <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Vue Router with CDN</title>
         <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/vue-router@3/dist/vue-router.js"></script>
       </head>
       <body>
         <div id="app">
           <router-view></router-view>
         </div>
         <script src="app.js"></script>
       </body>
     </html>

JavaScript 文件 (app.js)：

 // app.js
     // 定义组件
     const Home = { template: '<div>Home</div>' }
     const About = { template: '<div>About</div>' }
     // 定义路由
     const routes = [
       { path: '/', component: Home },
       { path: '/about', component: About }
     ]
     // 创建路由实例
     const router = new VueRouter({
       routes // (缩写) 相当于 routes: routes
     })
     // 创建和挂载根实例
     const app = new Vue({
       router
     }).$mount('#app')