ATP应用测试平台——关于vue-router前端路由的配置使用案例

Posted 2021-09-08 北溟溟

前言

VueRouter是Vue.js(opens new window)官方的路由管理器。它和Vue.js的核心功能深度集成，功能丰富，是我们构建vue前端项目中必不可少的的组件之一，本节我们简单介绍一下在vue项目中如何使用vue-router组件实现页面的路由跳转。源码地址：https://gitee.com/northcangap/atp。喜欢的朋友可以star一下哦，创作不易。

正文

①安装vue-router

命令：npm i vue-router -s

 ②路由配置

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        redirect: "/login",
    },
    {
        path: "/login",
        name: "login",
        component: () => import('@/views/Login.vue')
    },
    {
        path: "/home",
        name: "home",
        component: () => import('@/views/Home.vue')
    },
    {
        path: "/multiFormValidate",
        name: "multiFormValidate",
        component: () => import('@/views/func/MultiFormValidate.vue')
    },
    {
        path: "/crudTemplate",
        name: "crudTemplate",
        component: () => import('@/views/func/CrudTemplate.vue')
    },
    {
        path: "/dialogTemplate",
        name: "dialogTemplate",
        component: () => import('@/views/func/DialogTemplate.vue')
    },
    {
        path: "/easyExcel",
        name: "easyExcel",
        component: () => import('@/views/func/EasyExcel.vue')
    },
    {
        path: "/tablePrint",
        name: "tablePrint",
        component: () => import('@/views/func/TablePrint.vue')
    }
];

const router = new VueRouter({
    // base: "atp",
    // mode: "history",
    mode: "hash",
    routes,
});

export default router;

  ③main.js路由全局注册

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '@/router';
import {http} from '@/axios/index';
import qs from 'qs';
import '@/util/derective'
import App from '@/App.vue';
import Print from 'vue-print-nb'

Vue.use(Print);
Vue.use(ElementUI);
Vue.prototype.$http = http;
Vue.prototype.$qs = qs;
Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

 ④路由使用的几种模式

 ⑤结果验证

说明：可以实现页面路由的正常切换。

 

结语

ok，关于vue-router前端路由的配置使用案例到这里就结束了，我们下期见。。。