vue+vueRouter 实例demo

main.js

import Vue from 'vue'import App from './App.vue'import router from './router/router'/** *  加载插件 *  @VueRouter：路由 *//** *  定义常量信息 *  @DOMAINNAME：客户端地址 *  @SERVERNAME：服务端地址 *  @API_SERVER：服务端接口 */let DOMAINNAME = ''let SERVERNAME = ''let API_SERVER = ''/** *  全局方法 *///获取当前页面路由信息router.afterEach(function (transition) {    console.log("当前路由参数")    console.log(transition)})/** *  创建实例 */new Vue({    router,    render: h => h(App)}).$mount('#app')

路由文件router/router.js

/** *  路由文件 *  引入[Vue, VueRouter]模块 */import Vue from 'vue'import VueRouter from 'vue-router'/** *  加载模块 */Vue.use(VueRouter)/** *  配置路由 */const router = new VueRouter({    routes:[        {   //登录页面            path:'/login',            name:'login',            title:'vue login',            component:function (resolve) {                require(['../components/login.vue'], resolve)            }        },        {   //主页面            path:'/home',            name:'home',            title:'home',            component:function (resolve) {                require(['../components/home.vue'], resolve)            }        },        {   //个人中心页面            path:'/userInfo',            name:'userInfo',            title:'userInfo',            component:function (resolve) {                require(['../components/userInfo/userInfo.vue'], resolve)            }        }    ]})export  default  router

工具类kit/cookie.js

import Vue from 'vue'Vue.prototype.setCookie = function (name, value, day) {    let date = new Date    date.setTime(date.getTime() + 24*60*60*1000*day);    window.document.cookie = name + "=" + value + ";path=/;expires=" + date.toGMTString();}Vue.prototype.getCookie = function (name) {    let v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');    return v ? v[2] : null}Vue.prototype.delCookie = function (name) {    let date = new Date    date.setTime(date.getTime() - 1)    let val = this.getCookie(name)    if(val != null){        document.cookie= name + "="+val+";expires="+date.toGMTString();    }}

主程序app.vue

<template>  <div id="app">    <router-view></router-view>  </div></template><script>export default {  created (){    let vue = this      vue.$router.push('./login')  },  name: 'app',  data () {    return {      msg: 'Welcome to Your Vue.js App'    }  }}</script><style lang="scss">*{ margin:0;  padding:0;}html,body{overflow: hidden}#app{width: 1024px;margin: 0 auto;border:1px solid #D9D9D9;border-top:none;height: 100%;}</style>

login.vue

<template>    <div id="Login">        <!--引用头部组件-->        <Top></Top>        <form class="form-group box-shadow">            <div class="input-group">                <label class="input-label">账号</label>                <input type="text" v-model="name" name="name" placeholder="请输入123456789"/>            </div>            <div class="input-group">                <label class="input-label">密码</label>                <input type="password" v-model="pwd" name="pwd" placeholder="请输入123456789"/>            </div>            <div class="button-group">                <button class="min-button" type="button" @click="login">登录</button>                <span class="button-span">没有账户？<a href="javascript:void(0)" @click="register">立即注册</a></span>            </div>        </form>    </div></template><script>    import Top from './layout/header.vue'    import Cookie from '../kit/cookie'    export default {        components: {            Top        },        created () {            let vue, loginStatus            vue = this            loginStatus = vue.getCookie("loginStatus")            if(loginStatus){                console.log("之前登录过")                setTimeout(function () {                    vue.$router.push({name:'home', params:{msg:"自动登录",user:vue.$data.name}})                },2000)            } else {                console.log("没有登录过")            }        },        data () {            return {                name:null,                pwd:null            }        },        methods: {            login () {                let vue, name, pwd                vue = this                name = vue.$data.name                pwd = vue.$data.pwd                if(!name || !pwd) {                   console.log("不能为空")                    return                } else {                   if(name === '123456789' && pwd === '123456789'){                       vue.setCookie("loginStatus",true,1)                       vue.$router.push('./home')                   } else {                       console.log("用户名密码输入有误")                   }                }            },            register () {                let vue = this                console.log("这是一个空的事件哦！")            }        }    }</script><style>*{font-size: 13px;}#Login .form-group{border:1px solid #D9D9D9;width:400px;margin: 0 auto;padding: 10px}#Login .input-group{width: 100%;padding: 5px 0}#Login .input-label{display: inline-block;height: 35px;line-height: 35px;padding: 0 5px;width: 10%;float: left}#Login .input-group input{width: 85%;height:35px;border:1px solid #D9D9D9;border-radius: 2px;background: none;text-indent: 15px;}#Login .button-group button{background:none;border:1px solid #D9D9D9;min-width: 80px;min-height: 30px;}#Login .button-group .min-button{}#Login .box-shadow{box-shadow:3px 4px 5px 2px #D9D9D9,1px 1px 10px 2px #D9D9D9;border:1px solid #D9D9D9}#Login .button-span{float: right;height: 30px;line-height: 30px;}</style>

home.vue

<template>    <div id="Home">        <p>欢迎{{userMsg}}用户<a href="javascript:void(0)">{{userName}}</a> <span class="cancellation" @click="cancellation">注销</span></p><hr>        <p>第二次会自动登录,请留意上方的“普通/金卡”文字,请在电脑端开dubug模式，每一步骤都有日志！</p>    </div></template><script>    import Cookie from '../kit/cookie'    export default {        components: {},        created () {            let vue, parameter            vue = this            parameter = vue.$route.params            console.log(parameter)            vue.$data.userName = vue.$route.params.user            if(parameter.msg){                vue.$data.userMsg = "金卡"            } else {                vue.$data.userMsg = "普通"            }        },        data () {            return {                userName:"",                userMsg:""            }        },        methods: {            cancellation () {                let vue = this                console.log("注销登录")                vue.delCookie('loginStatus')                setTimeout(function () {                    vue.$router.push('./login')                },1000)            }        }    }</script><style>#Home p{font-size: 15px;padding: 20px;color: red;font-weight: bold}#Home .cancellation{float: right;}</style>

以上为效果图，未使用UI框架。

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build

For detailed explanation on how things work, consult the [docs for vue-loader]

项目包含分离的路由 Router 

项目包含分离的工具类 Kit

gitHub地址

[e-mail]:Apache-Ra/ra-vue-demo.git

用于交流互相学习，不喜勿喷。