vue-router 路由的使用

vue-router 路由的使用

main.js引用

import Vue from 'vue';
import ElementUI from 'element-ui';
import router from './router';
import store from "./store";

import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);

import axios from 'axios';
Vue.prototype.$http = axios;


axios.defaults.baseURL = "http://localhost:8080/";

Vue.config.productionTip = false;

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

roter文件夹中index.js使用

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')
    },
    {
        path: '/home',
        name: 'Home',
        redirect: '/index',
        meta: { title: "首页" },
        component: () => import('@/views/Home'),
        children: [
            {
                path: '/index',
                name: 'index',
                component: () => import('@/views/Home/Index'),
            },
            // {
            //     path: '/wms',
            //     name: 'wms',
            //     redirect: '/wms/list',
            //     meta: { title: "列表" },
            //     component: () => import('@/views/Home/Wms'),
            //     children: [
            //         {
            //             path: '/wms/list',
            //             name: 'wmsList',
            //             meta: { title: "列表" },
            //             component: () => import('@/views/Home/Wms/List.vue'),
            //         },
            //         {
            //             path: '/wms/info',
            //             name: 'wmsInfo',
            //             meta: { title: "信息" },
            //             component: () => import('@/views/Home/Wms/Info.vue'),
            //         },
            //     ]
            // },
        ]
    },
]


const router = new VueRouter({
    routes
})


// 路由拦截，在跳转前执行
// to 即将进入的路由
// from 即将离开的路由
// next 钩子函数，下一个
router.beforeEach(function (to, from, next) {
    if (!sessionStorage.getItem('loginname')) {    //判断是否登录
        if (to.path != '/login') {
            next('/login');
        }
    };
    next();
})

export default router

 

app.vue中使用

<template>
    <div id="app">
        <Login></Login>
        <router-view />
    </div>
</template>

<script>
import Login from "@/views/Login";
export default {
    components:{
        Login,
    }
};
</script>

<style>
body {
    margin: 0;
    padding: 0;
}


.el-input__inner:focus {
    border: 1px solid #635f5f;
}
</style>