在前一篇文章中，https://www.lanwuyaojiu.cn/blogm/blogart-41.html，我往用vue cli 创建的demo中添加了路由和vuex插件。今天我就将在其基础上再稍微增加一点点内容，设置一个页面需要登录后才能访问。这里涉及到vue-router的入门应用和vuex中store的简单赋值。
第一步，确定思路，开始index访问，点击bar，未登录被拦截跳转到登录页，点击登录后，跳转回index。目前只有bar页面，先造view/index.vue和login/login.vue。
//index.vue
<template>
<div>this is index</div>
</template>
<script>
export default {
name: 'Index'
}
</script>//login.vue
<template>
<div class="login">这是登录
<input type="button" value="登录" @click="DL" />
</div>
</template>
<script>
export default{
created:function(){
console.log("login created");
},
mounted:function(){
console.log("login mounted");
},
methods:{
DL(){
console.log("do login");
this.$store.commit("dologin", true);//调用store的登录更新方法
this.$router.push("/");//让路由跳转页面到index，在main.js中的路由配置了 "/" 指向index.vue
}
}
}
</script> 创建完页面后，在main.js中增加login.vue使用到的store中的dologin 方法和"/"指向index的路由，和根据官方文档示例，添加路由拦截。
//main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router'; //引入router
import Vuex from 'vuex'; //引入vuex
import Foo from './view/foo.vue';
import Bar from './view/bar.vue';
import Login from './login/login.vue'; //这里新引入新增加的login页面
Vue.config.productionTip = false;
Vue.use(VueRouter); //导入vue-router
Vue.use(Vuex); //导入vuex
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来 类似 import page from 'page.vue'
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{ path: '/login', component: Login },//增加登录页的路由
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar,meta: { requiresAuth: true } },//设置meta元数据用于路由器拦截，这里设置bar页面需要登录后
{path:'/',component:() => import('./view/index.vue')} //增加index的路由，这里是直接在使用位置import就不设置别名
];
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes:routes // (缩写) routes 相当于 routes: routes
});
router.beforeEach((to, from, next) => {//路由在匹配到路径时，在跳转前
if (to.matched.some(record => record.meta.requiresAuth)) {//如果元数据是需要验证登录,进入拦截
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!store.state.userLogin) {//判断当前是否登录了
next({
path: '/login',
query: { redirect: to.fullPath }
});//没有登录，让路由向登录页跳转
} else {
next();//已经登录了的按原计划跳转
}
} else {
next() // 确保一定要调用 next() //其他不需要登录的路径按原来计划跳转
}
})
//console.log(router);
//vuex store
const store = new Vuex.Store({
state: {
count: 0,userLogin:false //增加登录状态管理
},
mutations: {
increment (state) {
state.count++
},
dologin(state){
state.userLogin=true; //更新登陆状态
}
}
})
//-----------------------------------------结束增加的部分
new Vue({
render: h => h(App),
router:router, //增加router对象
store:store //增加store对象
}).$mount('#app'); 一起就绪，编译运行。由于这次进行的是入门操作，没遇到什么大错误。
