路由

Create routes powered by Vue Router. You can add and remove routes in router.js file in src directory.
创建由Vue路由器支持的路由。您可以在src目录中的router.js文件中添加和删除路由。

Understanding router.js 了解router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

Above code in router.js, imports vue and vue-router and register them in our app.Now Following code export router to be used in main.js file.
router.js中，导入vue和vue-router并在应用程序中注册。现在，下面的代码将其导出并在main.js文件中使用。

export default new Router({ ... })

Understanding Router() Instance 了解Router实例

mode:模式
First thing you will notice in Router() is mode option, this option is set to history. Default value of mode is hash mode. Which uses the URL hash to simulate a full URL so that the page won’t be reloaded when the URL changes.
您将在Router() 中注意到的第一件事是mode选项，此选项设置为history,默认值为hash。它使用URL Hash来模拟完整的URL，以便在URL更改时不会重新加载页面。

To get rid of the hash, we used history mode. which leverages the history.pushState API to achieve URL navigation without a page reload. By using history mode in our router we can create beautiful URLs.
为了摆脱哈希值，我们使用了history模式。 它利用history.pushState API实现URL导航，而无需重新加载页面。 通过在路由器中使用history模式，我们可以创建漂亮的URL。

base:
base is the base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value “/app/“
base是应用程序的基本URL。 例如，如果整个单页应用程序在/ app /下提供，则base应使用值”/app/“

scrollBehavior():
We used scrollBehavior function to scroll to top when navigating to a new route. return statement return {x:0, y:0} make page to scroll to top when new route is visited. You can find more on scrollBehavior in vue-router docs .
导航到新的路由时，我们使用了scrollBehavior函数滚动到顶部。 return语句return {x：0，y：0}使页面在进入新路由时滚动到顶部。 您可以在vue-router docs中找到有关scrollBehavior的更多信息。

Router Layouts 路由视图

Vuexy Admin have two layouts: 1. Main Layout and 2. Full page layout.
Vuexy Admin具有两种布局：1.Main Layout 和2. Full page layout.

routes property contains two objects regarding this two layouts. All routes which requires the main layout are children of Main Layout and other routes which requires full page layout, are children of Full Page Layout.
routes属性包含关于这两种布局的两个对象。 所有需要Main Layout布局的路由都是Main Layout的子级，而其他需要Full Page Layout布局的路由则是Full page layout的子级。

Path for both layouts are set to ''(empty string) so that children gets root url. This gives benefites of users can see beautiful URLs regardless of route’s layout.
两种布局的路径都设置为””，以便子级获得根url。 这给用户带来了好处，无论路由的布局如何，用户都可以看到漂亮的URL。

Routes & Lazy Loading 路由和延迟加载

Vue Router is configured to use Lazy Loading which makes Vuexy Admin blazing fast. component defined in router is lazy loaded through this code:
Vue路由器配置为使用“延迟加载”，这使Vuexy Admin的运行速度更快。 路由器中定义的组件通过以下代码延迟加载：

component: () => import('./views/apps/todo/Todo.vue')

Each route should map to a component and then component is called when use navigates to url regarding to path property.
每个路由都应映射到一个组件，然后在使用导航到与路径属性有关的url时调用该组件。

In our exmaple Todo App will be only imported if user visits '/apps/todo' url. All Routes also have name property so that you can also use Named Routes
在我们的示例中，仅当用户访问”/apps/todo” URL时才导入Todo App。 所有路由还具有name属性，因此您也可以使用命名路由

This technique decrease the bundle size and reduces load time of Vuexy Admin.
这种技术减小了包的大小并减少了Vuexy Admin的加载时间。

Add Menu Items 添加Sidebar菜单项

To add/remove items in sidebar, You have to edit sidebarItems.js file. Vuexy Admin uses custom sidebar which is slightly upgraded version of Vuesax Framework vs-sidebar component. This sidebar is built in a way which makes your work a lot easier.
要在边栏中添加/删除项目，您须编辑sidebarItems.js文件。 Vuexy Admin使用自定义边栏，它是Vuesax Framework vs-sidebar组件的微升级版本。 该侧边栏的构建方式使您的工作更加轻松。

Open sidebarItems.js which is located in src/layouts/components/vx-sidebar/. This file exports list of object(Array) which is passed as prop to vx-sidebar component.
打开位于src/layouts/components/vx-sidebar /中的sidebarItems.js。 该文件导出数组对象列表，该列表作为prop传递给vx-sidebar组件。

each object in this Array is sidebar-item. To create group, you have to pass url as null or use submenu property to define group’s items. Which will be again object with similar properties.
此数组中的每个对象都是一个侧边栏项目。 要创建组，您必须将url传递为null或使用submenu属性来定义组的项目。 它将再次成为具有类似属性的对象。

    {
        url: "/apps/email",
        name: "Email",
        slug: "email",
        icon: "MailIcon",
        i18n: "Email",
    }

Above code creates item which navigates to /apps/email.
上面的代码创建了导航到/apps/email的项目。

{
        url: null, // You can omit this 你可以忽略这个
        name: "Dashboard",
        slug: "dashboard",
        icon: "HomeIcon",
        i18n: "Dashboard",
        submenu: [
            {
                url: '/dashboard/analytics',
                name: "Analytics",
                slug: "dashboard-analytics",
                i18n: "Analytics",
            },
            {
                url: '/dashboard/ecommerce',
                name: "eCommerce",
                slug: "dashboard-eCommerce",
                i18n: "eCommerce",
            },
        ]
    },

Above code create group named Dashboard, having two sub items Analytics and eCommerce.
上面的代码创建了一个名为Dashboard的组，其中有两个子项Analytics和eCommerce。

    {
        header: "Apps",
        i18n: "Apps",
    },

Above code creates group header in sidebar.
上面的代码在边栏中创建组标题。

WARNING item’s slug should be identical to name property of that route defined in router.js file. 项目的slug应与router.js文件中定义的路由的name属性相同。 e.g. /dashboard/analytics name should be dashboard-analytics in router.js file and in sidebarItems.js file link’s slug should be same. 例如:/dashboard/analytics名称在router.js文件中应为dashboard-analytics，而在sidebarItems.js文件中，链接的slug应相同。

At the bottom of this page you will find API table which explains each property of object(item).
在此页面的底部，您将找到API表，该表解释了对象 (item) 的每个属性。

Using Parent Property of Route使用Route的Parent属性

From v3.3, You can use meta property parent in route for activating sidebar item, even if that route is not defined in sidebarItems.js file.
从v3.3版本开始，您可以在路由中使用parent属性来激活侧边栏项，即使该路由未在sidebarItems.js文件中定义。

This is helpful if you want to display inner pages while having sidebar link active.
如果要在激活侧边栏链接时显示内部页面，这将很有帮助。

Please consider checking Knowledge Base page. It has inner pages which is not defined in sidebarItems.js therefor they are not visible in sidebar anywhere. Now, if you visit any of that inner page, sidebar link (Knowledge Base) will not remain active because sidebar link and current route link is different now.
请考虑Knowledge Base页面。 它具有在sidebarItems.js中未定义的内部页面，因此在任何侧边栏中都不可见。 现在，如果您访问该内页中的任何一个，则侧栏链接（Knowledge Base）将不会保持活动状态，因为侧栏链接和当前路由有所不同。

To tackle this we added new property meta in route called parent which let you define parent of that route. If you check router.js in our admin template, you will find below code…
为了解决这个问题，我们在父级的路由中添加了新的属性parent，您可以定义该路由的父级。 如果您在我们的管理模板中检查router.js，则会发现以下代码…

{
    path: '/pages/knowledge-base/category',
    name: 'page-knowledge-base-category',
    component: () => import('@/views/pages/KnowledgeBaseCategory.vue'),
    meta: {
        breadcrumb: [
            { title: 'Home', url: '/' },
            { title: 'Pages' },
            { title: 'KnowledgeBase', url: '/pages/knowledge-base' },
            { title: 'Category', active: true },
        ],
        parent: 'page-knowledge-base', // It's where MAGIC happens
        rule: 'editor'
    },
},

As you can see, we added parent meta and it’s value is name of /pages/knowledge-base route. So, if you visit /pages/knowledge-base/category in your application sidebar item with /pages/knowledge-base slug will be active.
如您所见，我们添加了parent属性，其值为/pages/knowledge-base路由的名称。 因此，如果您在应用程序侧边栏中访问/pages/knowledge-base/category，则带有/pages/knowledge-base slug的项将处于活动状态。

WARNING As above make sure sidebar item’s slug and route’s meta’s parent property have same value. 如上所述，确保侧边栏项目的slug和路由meta的parent属性具有相同的值。

Creating Breadcrumb 新建面包屑导航

To add breadcrumb to any route, just add meta to that route.
要将面包屑导航添加到路由中，只需将meta添加到该路由。

{
    path: '/ui-elements/colors',
    name: 'colors',
    component: () => import('./views/ui-elements/colors/Colors.vue'),
    meta: {
        breadcrumb: [
            { title: 'Home', url: '/' },
            { title: 'Colors', active: true },
        ],
        pageTitle: 'Colors'
    },
},

In above code you can see meta property, which is used to create breadcrumb specified page/route. meta property must have breadcrumb property and value for this breadcrumb property is Array of objects.
在上面的代码中，您可以看到meta属性，该属性用于创建面包屑指定的页面/路由。 meta属性必须具有breadcrumb属性，并且此面包屑属性的值是对象数组。

Single object is single link in breadcrumb.
单个对象是面包屑中的单个链接。

{ title: 'myPage', url: '/urlToThatPage' },

Above code will create breadcrumb link named myPage and it will navigate to /urlToThatPage. You can also add non-routing link to breadcrumb if you omit url property in that object.
上面的代码将创建名为myPage的面包屑链接，并将导航到/urlToThatPage。如果在对象中省略url属性，也可以向面包屑添加非路由链接。

Home:
First link in breadcrumb will be always treated as home/root link. This home link will have HomeIcon.
面包屑中的第一个链接将始终被视为主目录/根目录链接。 此主页链接将具有HomeIcon。

Active:
Last item in array must be active page’s name, which breadcrumb get from title property. This last object in array must have active set to true.
数组中的最后一项必须是被激活得页面的名称，该名称从title属性获得。 数组中的最后一个对象必须将active设置为true。（当然了，面包屑导航中最后一个链接就是正在查看或者说是激活的链接）

[
    { title: 'Home', url: '/' },
    { ... },
    { ... },
    { title: 'Colors', active: true }
]

Page title 页面title

You can define page title directly in route creation process by providing pageTitle property to meta.
您可以通过向meta提供pageTitle属性，直接在路由创建过程中定义页面标题。

{
    ...
    meta: {
        breadcrumb: [...],
        pageTitle: 'Colors'
    },
},

If your title is dynamic, you can use mounted hook of vueJS to update page title.
如果您的标题是动态的，您可以使用VueJS的mounted生命周期钩子来更新页面标题。

mounted() {
    this.$emit('changeRouteTitle', 'nameOfYourPage');
}

Above code will change title of your page when your SFC(single file component)/page is rendered.
当呈现SFC (单文件组件)/页面时，上述代码将更改页面的标题。

TIP To see how to add dynamic page name, check > src/views/pages/KnowledgeBaseCategory.vue.要查看如何添加动态页面名称，请检查src / views / pages / KnowledgeBaseCategory.vue。

Add Permission Control 添加权限控制

You can restrict user to access page by using ACL provided in Vuexy Admin. You can check implementation of access control in this section.
您可以使用Vuexy Admin中提供的ACL限制用户访问页面。您可以在本节中检查访问控制的实施情况。 WARNING We used > vue-acl library for providing ACL in our application. Creator of vue-acl rewritten whole code since 4.0.7(approx). Since then route protection is not working.So, we highly recommend till creator of that library don’t fix that bug, Please use > vue-acl@4.0.7我们使用vue-acl库在应用程序中提供ACL。 vue-acl的作者从4.0.7（大约）起重写了整个代码。 从那时起，路由保护就无法正常工作。因此，我们强烈建议您在该库的作者未修复该错误之前，请使用vue-acl@4.0.7。

For adding route protection to any route just add authRequired meta and set it to true. So, vue-router will check if user authentication when that route is visited.
要向任何路由添加路由保护，只需添加authRequired元并将其设置为true。 因此，vue-router将在访问该路由时检查用户身份验证。
就像这样:

{
    path: '/dashboard/analytics',
    name: 'dashboard-analytics',
    component: () => import('./views/DashboardAnalytics.vue'),
    meta: {
        rule: 'admin',
        authRequired: true
    }
}

Set Route as fixed height page(App Page) 将Route设置为固定高度页面（应用页面）

We provided apps like email, todo etc. Which is of fixed height. This requires changes some styles. We we made class which handles styling. All you have to do is just set meta in that application route.
我们提供固定高度的电子邮件、待办事项等应用程序。这需要更改一些样式。我们提供了处理样式的class。 您所要做的只是在该应用程序路由中设置meta。

Please check below code snippet.
请检查以下代码段。

{
    path: '/apps/todo/:filter',
    name: 'todo',
    component: () => import('./views/apps/todo/Todo.vue'),
    meta: {
        rule: 'editor',
        parent: "todo",
        no_scroll: true, // add this
    }
}

API