vue init webpack hello-vue

# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装 SASS 加载器
npm install sass-loader node-sass --save-dev
# 安装依赖
npm install

npm run dev

<template><div>首页</div>
</template><script>export default {name: "Main"}
</script><style scoped></style>

<template><div><el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"><h3 class="login-title">欢迎登录</h3><el-form-item label="账号" prop="username"><el-input type="text" placeholder="请输入账号" v-model="form.username"/></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" placeholder="请输入密码" v-model="form.password"/></el-form-item><el-form-item><el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button></el-form-item></el-form><el-dialogtitle="温馨提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>请输入账号和密码</span><span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>export default {name: "Login",data() {return {form: {username: '',password: ''},// 表单验证，需要在 el-form-item 元素中增加 prop 属性rules: {username: [{required: true, message: '账号不可为空', trigger: 'blur'}],password: [{required: true, message: '密码不可为空', trigger: 'blur'}]},// 对话框显示和隐藏dialogVisible: false}},methods: {onSubmit(formName) {// 为表单绑定验证功能this.$refs[formName].validate((valid) => {if (valid) {// 使用 vue-router 路由到指定页面，该方式称之为编程式导航this.$router.push("/main");} else {this.dialogVisible = true;return false;}});}}}
</script><style lang="scss" scoped>.login-box {border: 1px solid #DCDFE6;width: 350px;margin: 180px auto;padding: 35px 35px 15px 35px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;box-shadow: 0 0 25px #909399;}.login-title {text-align: center;margin: 0 auto 40px auto;color: #303133;}
</style>

import Vue from 'vue'
import Router from 'vue-router'import Login from "../views/Login"
import Main from '../views/Main'Vue.use(Router);export default new Router({routes: [{// 登录页path: '/login',name: 'Login',component: Login},{// 首页path: '/main',name: 'Main',component: Main}]
});

import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'// 导入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'import App from './App'// 安装路由
Vue.use(VueRouter);// 安装 ElementUI
Vue.use(ElementUI);new Vue({el: '#app',// 启用路由router,// 启用 ElementUIrender: h => h(App)
});

<template><div id="app"><router-view/></div>
</template><script>export default {name: 'App',}
</script>

<template><div>个人信息</div>
</template><script>export default {name: "UserProfile"}
</script><style scoped></style>

<template><div>用户列表</div>
</template><script>export default {name: "UserList"}
</script><style scoped></style>

import Vue from 'vue'
import Router from 'vue-router'import Login from "../views/Login"
import Main from '../views/Main'// 用于嵌套的路由组件
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'Vue.use(Router);export default new Router({routes: [{// 登录页path: '/login',name: 'Login',component: Login},{// 首页path: '/main',name: 'Main',component: Main,// 配置嵌套路由children: [{path: '/user/profile', component: UserProfile},{path: '/user/list', component: UserList},]}]
});

<template><div><el-container><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-caret-right"></i>用户管理</template><el-menu-item-group><el-menu-item index="1-1"><router-link to="/user/profile">个人信息</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/user/list">用户列表</router-link></el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-caret-right"></i>内容管理</template><el-menu-item-group><el-menu-item index="2-1">分类管理</el-menu-item><el-menu-item index="2-2">内容列表</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown><span>Lusifer</span></el-header><el-main><router-view /></el-main></el-container></el-container></div>
</template><script>export default {name: "Main"}
</script><style scoped lang="scss">.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}
</style>

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile}

<router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>

this.$router.push({ name: 'UserProfile', params: {id: 1}});　　

{{ $route.params.id }}　　

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true}

 export default {props: ['id'],name: "UserProfile"}

{{ id }}

{path: '/main',name: 'Main',component: Main
},
{path: '/goHome',redirect: '/main'
}

<router-link to="/goHome">回到首页</router-link>

{// 首页path: '/main/:username',name: 'Main',component: Main},{path: '/goHome/:username',redirect: '/main/:username'
}　　

<router-link to="/goHome/Lusifer">回到首页</router-link>

export default new Router({mode: 'history',routes: []
});

<template><div>页面不存在，请重试！</div>
</template><script>export default {name: "NotFount"}
</script><style scoped></style>

    {path: '*',component: NotFound}

export default {props: ['id'],name: "UserProfile",beforeRouteEnter: (to, from, next) => {console.log("准备进入个人信息页");next();},beforeRouteLeave: (to, from, next) => {console.log("准备离开个人信息页");next();}}

npm install axios -s

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

  export default {props: ['id'],name: "UserProfile",beforeRouteEnter: (to, from, next) => {console.log("准备进入个人信息页");// 注意，一定要在 next 中请求，因为该方法调用时 Vue 实例还没有创建，此时无法获取到 this 对象，在这里使用官方提供的回调函数拿到当前实例next(vm => {vm.getData();});},beforeRouteLeave: (to, from, next) => {console.log("准备离开个人信息页");next();},methods: {getData: function () {this.axios({method: 'get',url: 'http://localhost:8080/data.json'}).then(function (repos) {console.log(repos);}).catch(function (error) {console.log(error);});}}}

// 设置用户登录成功
sessionStorage.setItem('isLogin', 'true');

// 在跳转前执行
router.beforeEach((to, form, next) => {// 获取用户登录状态let isLogin = sessionStorage.getItem('isLogin');// 注销if (to.path == '/logout') {// 清空sessionStorage.clear();// 跳转到登录next({path: '/login'});}// 如果请求的是登录页else if (to.path == '/login') {if (isLogin != null) {// 跳转到首页next({path: '/main'});}}// 如果为非登录状态else if (isLogin == null) {// 跳转到登录页next({path: '/login'});}// 下一个路由next();
});

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);// 全局 state 对象，用于保存所有组件的公共数据
const state = {// 定义一个 user 对象// 在组件中是通过 this.$store.state.user 来获取user: {username: ''}
};// 实时监听 state 值的最新状态，注意这里的 getters 可以理解为计算属性
const getters = {// 在组件中是通过 this.$store.getters.getUser 来获取,页面上使用{{$store.getters.getUser.username}}来获取getUser(state) {return state.user;}
};// 定义改变 state 初始值的方法，这里是唯一可以改变 state 的地方，缺点是只能同步执行
const mutations = {// 在组件中是通过 this.$store.commit('updateUser', user); 方法来调用 mutationsupdateUser(state, user) {state.user = user;}
};// 定义触发 mutations 里函数的方法，可以异步执行 mutations 里的函数
const actions = {// 在组件中是通过 this.$store.dispatch('asyncUpdateUser', user); 来调用 actionsasyncUpdateUser(context, user) {context.commit('updateUser', user);}
};export default new Vuex.Store({state,getters,mutations,actions
});

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'Vue.use(Vuex);new Vue({el: '#app',store
});

 export default {name: 'App',mounted() {window.addEventListener('unload', this.saveState);},methods: {saveState() {sessionStorage.setItem('state', JSON.stringify(this.$store.state));}}}

const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {user: {username: ''}
};　

const user = {// 因为模块化了，所以解决刷新问题的代码需要改造一下state: sessionStorage.getItem('userState') ? JSON.parse(sessionStorage.getItem('userState')) : {user: {username: ''}},getters: {getUser(state) {return state.user;}},mutations: {updateUser(state, user) {state.user = user;}},actions: {asyncUpdateUser(context, user) {context.commit('updateUser', user);}}
};export default user;

import Vue from 'vue'
import Vuex from 'vuex'import user from './modules/user'Vue.use(Vuex);export default new Vuex.Store({modules: {// this.$store.state.useruser}
});

 export default {name: 'App',mounted() {window.addEventListener('unload', this.saveState);},methods: {saveState() {// 模块化后，调用 state 的代码修改为 this.$store.state.user(需要定位到user这个对象)sessionStorage.setItem('userState', JSON.stringify(this.$store.state.user));}}}