Skip to content
Shimon's BlogShimon's Blog
主页
杂谈
  • 主页
      • 代码笔记
          • Vue.js
            • TypeScript 组件 Demo
                • Vue Router
                  • 快速上手
                    • 案例
                      • HTML
                        • JavaScript
                      • Vue 与小程序的异同
                        • Vue 单文件组件说明
                          • 在 Vue 中使用 Typescript
                            • 开发环境安装
                              • 快速上手 Vue.js
                                • 组件使用说明

                              案例

                              Shimon Zhan2022年4月19日
                              • Vue
                              • Vue Router
                              • Demo
                              大约 2 分钟

                              此页内容
                              • HTML
                              • JavaScript

                              用 Vue.js + Vue Router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当您要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。

                              下面是个基本例子:

                              # HTML

                              <script src="https://unpkg.com/vue/dist/vue.js"></script>
                              <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
                              
                              <div id="app">
                                <h1>Hello App!</h1>
                                <p>
                                  <!-- 使用 router-link 组件来导航. -->
                                  <!-- 通过传入 `to` 属性指定链接. -->
                                  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                                  <router-link to="/foo">Go to Foo</router-link>
                                  <router-link to="/bar">Go to Bar</router-link>
                                </p>
                                <!-- 路由出口 -->
                                <!-- 路由匹配到的组件将渲染在这里 -->
                                <router-view />
                              </div>
                              

                              # JavaScript

                              // 1. 定义 (路由) 组件。
                              // 可以从其他文件 import 进来
                              const Foo = { template: "<div>foo</div>" };
                              const Bar = { template: "<div>bar</div>" };
                              
                              // 2. 定义路由
                              // 每个路由应该映射一个组件。其中"component" 可以是
                              // 通过 Vue.extend() 创建的组件构造器,
                              // 或者,只是一个组件配置对象。
                              // 我们晚点再讨论嵌套路由。
                              const routes = [
                                { path: "/foo", component: Foo },
                                { path: "/bar", component: Bar },
                              ];
                              
                              // 3. 创建 router 实例,然后传 `routes` 配置
                              // 您还可以传别的配置参数, 不过先这么简单着吧。
                              const router = VueRouter.createRouter({
                                history: VueRouter.createWebHashHistory(),
                                routes, // (缩写) 相当于 routes: routes
                              });
                              
                              // 4. 创建和挂载根实例。
                              // 记得要通过 router 配置参数注入路由,
                              // 从而让整个应用都有路由功能
                              const app = Vue.createApp({}).use(router).$mount("#app");
                              
                              // 现在,应用已经启动了!
                              

                              通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由:

                              // Home.vue
                              export default {
                                computed: {
                                  username() {
                                    // 我们很快就会看到 `params` 是什么
                                    return this.$route.params.username;
                                  },
                                },
                                methods: {
                                  goToDashboard() {
                                    if (isAuthenticated) {
                                      this.$router.push("/dashboard");
                                    } else {
                                      this.$router.push("/login");
                                    }
                                  },
                                },
                              };
                              

                              该文档通篇都常使用 router 实例。留意一下 this.$router 和 router 使用起来完全一样。我们使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。

                              要注意,当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active。查看API 文档open in new window学习更多相关内容。

                              上次编辑于: 2022/4/19 07:13:07
                              贡献者: ShimonZhan
                              上一页
                              快速上手
                              Copyright © 2021-present Shimon Zhan