Java教程

3.2.3 启动路由器

本文主要是介绍3.2.3 启动路由器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

在 main.js 入口文件中启用该路由器。main.js 作为入口文件,使用 import 可以把所有要用到的包都导入到这里,然后在 Vue 项目中去运用它们。创建和挂载根实例,通过 router 配置参数注入路由,从而让整个应用都有路由功能,具体如示例 2 所示。

示例2

image

image

经过示例 2 的配置之后,路由匹配到的组件将会渲染到 App.vue 的 <router-view></router-view>,App.vue 里应该这样写,如示例 3 所示。

示例3

<template>
  <div id="app">
    <router-view></router-view>
    <hzh-loading></hzh-loading>
    <hzh-footer>陈兰英</hzh-footer>
    <hzh-header>黄子涵</hzh-header>
    <hzh-main>黄春钦、佘佳梓</hzh-main>
  </div>
</template>

最后 App.vue 会渲染到 index.html,代码如示例 4 所示 。

示例4

image

这样就会把渲染出来的页面挂载到 id 为 app 的 div 里了。

经验

要理清楚组件渲染的过程,是如何一步一步显示出来的,这个过程很重要,理清这个过程对以后的项目开发很有帮助。

这篇关于3.2.3 启动路由器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!