13. [vuejs-11] 项目：路由与导航

路由功能使用户能够在应用程序的不同页面之间进行导航。

项目目录结构如下：

13.1. 安装依赖项

在 [Vue.js] 中实现路由需要 [vue-router] 依赖项：

在 [1-3] 中，我们安装了 [vue-router] 依赖项；
在 [4-6] 中，安装依赖项后，修改了 [package.json] 文件；

13.2. 路由脚本 [router.js]

应用程序的导航规则定义在 [router.js] 文件中（脚本名称可以是任意名称）：


// imports nécessaires au routage
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// plugin de routage
Vue.use(VueRouter)
 
// les composants cibles du routage
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'
 
 
// les routes de l'application
const routes = [
  // home
  { path: '/', name: 'home', component: Component1 },
  // Component1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // Component2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // Component3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]
 
// le routeur
const router = new VueRouter({
  routes,
  mode: 'history',
})
 
// export du routeur
export default router

注释

[router.js] 脚本将定义我们应用程序的路由规则；
第 1–6 行：启用路由所需的 [vue-router] 插件。这需要导入 [Vue] 类/函数（第 2 行）和路由插件（第 3 行）。该插件已随我们刚刚安装的 [router] 依赖项一并安装；
第 8–11 行：导入路由的目标视图；
第 15–21 行：定义 routes 数组。该数组的每个元素都是一个具有以下属性的对象：
- [path]：视图的 URL，即我们希望在浏览器 [URL] 字段中显示的地址。您可以自由输入任意内容；
- [name]：路由名称。此处同样可以输入任意内容；
- [component]：用于显示该视图的组件。此处必须指定已存在的组件；

因此这里共有四条路由：[/]、/view1、/view2、/view3。

第 33–36 行：路由器是第 3 行导入的 [VueRouter] 类的实例。此处的 [VueRouter] 构造函数使用了两个参数：
- 应用程序的路由；
- 浏览器中 URL 的写入模式：默认模式 [hash] 生成 [localhost:8080/#/view1] 格式的 URL（# 表示哈希）。[history] 模式则移除 #，生成 [localhost:8080/view1]；
第 39 行：导出路由器；

13.3. 主脚本 [main.js]

主脚本 [main.js] 如下：


// imports
import Vue from 'vue'
import App from './App.vue'
 
// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
 
// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
// routeur
import monRouteur from './router'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  name: "app",
  // vue principale
  render: h => h(App),
  // routeur
  router: monRouteur,
}).$mount('#app')

注释

第 14 行：我们导入了由 [router.js] 脚本导出的路由器；
第 25 行：将此路由器作为参数传递给 [View] 类的构造函数，该构造函数将显示主视图 [App]，该视图与视图的 [router] 属性相关联；

13.4. 主视图 [App]

主视图的代码如下：


<template>
  <div class="container">
    <b-card>
      <!-- a message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- the current routing view -->
      <router-view />
    </b-card>
  </div>
</template>
 
<script>
  export default {
    name: "app"
  };
</script>

注释

第 9 行：在路由器中显示当前视图。只有当视图的 [router] 属性已初始化时，才会识别 <router-view> 标签；

13.5. 视图布局

视图布局由以下 [Layout] 组件处理：


<template>
  <!-- line -->
  <div>
    <b-row>
      <!-- three-column zone -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- nine-column zone -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>
 
<script>
  export default {
    // paramètres
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

我们在[vuejs-06]项目的[vuejs-06]章节中已经使用并讲解过这种布局。

13.6. 导航组件

[Navigation] 组件为用户提供导航菜单：

生成块 [1] 的组件如下所示：


<template>
  <!-- bootstrap menu with three options -->
  <b-nav vertical>
    <b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>
    <b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>
    <b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>
  </b-nav>
</template>

此代码生成三个导航链接中的第一个；
<b-nav-item> 标签的 [to] 属性必须与应用程序路由器路由中的某个 [path] 属性匹配；

13.7. 视图

视图 #1 如下：

区域 [3-4] 由以下 [Component1] 组件生成：


<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message-->
    <b-alert show variant="primary" slot="right">Vue 1</b-alert>
  </Layout>
</template>
 
<script>
  import Navigation from './Navigation';
  import Layout from './Layout';
 
  export default {
    name: "component1",
    // composants utilisés
    components: {
      Layout, Navigation
    }
  };
</script>

第 2 行：视图 #1 使用 [Layout] 组件的布局，该布局由两个名为 [left] 和 [right] 的插槽组成；
第 4 行：导航菜单被放置在左侧插槽中。这就是上文中显示的区域 [3]；
第 6 行：一条消息被放置在右侧插槽中。这就是上文中显示的区域 [4]；

视图 2 和 3 与此类似。

由 [Component2] 组件显示的视图 #2：


<!-- vue n° 2 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message -->
    <b-alert show variant="secondary" slot="right">Vue 2</b-alert>
  </Layout>
</template>
 
<script>
  import Navigation from './Navigation';
  import Layout from './Layout';
 
  export default {
    name: "component2",
    // composants de la vue
    components: {
      Layout, Navigation
    }
  };
</script>

由 [Component3] 组件显示的视图 #3：


<!-- vue n° 3 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message -->
    <b-alert show variant="info" slot="right">Vue 3</b-alert>
  </Layout>
</template>
 
<script>
  import Navigation from "./Navigation";
  import Layout from "./Layout";
 
  export default {
    name: "component3",
    // composants de la vue
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. 运行项目

执行后，将显示以下视图：

在 [1] 中，URL 为 [http://localhost:8080]。随后执行了以下路由规则：


{ path: '/', name: 'home', component: Component1 }

因此，显示了 [Component1] 组件。它显示视图 #1 [2]。现在，让我们点击 [View 1] 链接，其代码如下：


<b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>

当前显示效果如下：

在 [3] 中，执行了以下路由规则：


path: '/vue1', name: 'vue1', component: Component1

因此，[Component1] 组件再次被显示，从而呈现了视图 1 [4]。现在，让我们点击 [View 2] 链接，其代码如下：


<b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>

此时，新的视图如下所示：

在 [5] 中，执行了以下路由规则：


path: '/vue2', name: 'vue2', component: Component2

因此，显示了 [Component2] 组件，即视图 2。如果现在点击 [View 3] 链接，其代码如下：


<b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>

我们将看到以下新的视图：

在 [6] 中，执行了以下路由规则：


path: '/vue3', name: 'vue3', component: Component3

因此，显示了 [Component3] 组件，即视图 #3 [8]。