vue router elementui template CDN模式实现多个页面跳转

在Vue项目中使用Element UI和Vue Router时，可以通过CDN链接在HTML文件中引入Element UI和Vue Router，然后在Vue实例中全局注册Vue Router。以下是一个简化的HTML模板，展示了如何通过CDN引入Vue、Vue Router和Element UI，并实现简单的页面跳转：




<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue Router with Element UI</title>
  <!-- 引入Element UI样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入Vue -->
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  <!-- 引入Vue Router -->
  <script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.min.js"></script>
  <!-- 引入Element UI组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <el-button @click="navigateTo('home')">Home</el-button>
    <el-button @click="navigateTo('about')">About</el-button>
    <router-view></router-view>
  </div>
 
  <script>
    // 定义一些路由
    const routes = [
      { path: '/home', component: Home },
      { path: '/about', component: About }
    ];
 
    // 创建 router 实例
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    });
 
    // 定义组件
    const Home = { template: '<div>Home page</div>' }
    const About = { template: '<div>About page</div>' }
 
    // 创建和挂载根实例
    new Vue({
      router,
      methods: {
        navigateTo(route) {
          this.$router.push(route);
        }
      }
    }).$mount('#app');
  </script>
</body>
</html>

在这个例子中，我们通过CDN引入了Vue、Vue Router和Element UI。然后，我们定义了一些简单的路由，并在Vue实例中注册了Vue Router。我们还定义了两个组件Home和About，它们将根据路由显示不同的内容。最后，我们通过点击按钮来触发navigateTo方法，从而实现页面的跳转。

vue router elementui template CDN模式实现多个页面跳转

评论已关闭

推荐阅读