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>