Vue2.0路由篇之路由跳转的一个小问题
Vue2.0路由篇之路由跳转的一个小问题
- Vue2.0路由篇之路由跳转的一个小问题
- 需求分析
- 实现过程
- 遇到问题
- 解决过程
- 心得体会
本文涉及到的知识点有Vue(v2.5.3)、vue-router(v3.0.1)、vuex(v3.0.1)
vue的基础知识请参考vue官方网站
关于路由的基础知识请参考vue-router官方网站
有关Vuex的基础知识请参考vuex官方网站
在看完一些vue教程、vue官方文档后，手痒痒想写点东西，于是就从最简单的登陆页面开始。结果遇到一个问题，困扰3天。今天终于按照最初设想搞定了，特意把其中的坑分享出来^^。
需求分析
使用localhost:3000与localhost:3000/login打开网页的时候，都会显示登陆页面
账号有两种：管理员、普通用户。使用管理员登陆时，url为 localhost:3000/admin；使用普通账号登陆时，url为 localhost:3000/user
实现过程
- 这步很简单，在router中配置redirect参数即可。
export default [
{
path: "/",
component: Login,
children: [
{
path: "login",
component: Login
}
]
}
]实现效果如下图： 
- 新增两个组件：Admin、User。
再在代码里配置两个账号，管理员：admin，密码：admin；普通用户：user，密码：1234。
最后添加路由：
export default [
{
path: "/",
component: Login,
children: [
{
path: "login",
component: Login
},
// 添加的路由
{
path: "user",
component: User
},
{
path: "admin",
component: Admin
}
]
}
]当我信心满满的打开localhost:3000，输入用户名密码后。。。
遇到问题
阿西吧，页面没有跳转！但是控制台显示登陆成功，地址栏也变为localhost:3000/user了，为什么就是没跳转呢？输入localhost:3000/login时，明明可以跳转，为什么localhost:3000/user就不行了？
尝试手动输入localhost:3000/user，依然没有跳转。接下来就是痛苦的找解决方法的过程，包括问某度、查阅官方文档、检查代码。。。。。。。然而2天后。。。。。。依然没头绪。。。。。。
解决过程
- 在此期间，倒是找到一种方法可以实现相同的效果，那就是vue的component标签，这是vue的动态组件功能，把我的app.vue模板从
<div>
<router-view>router-view>
div>
template>改为这样就可以：
<div>
<component :is="current">component>
div>
template>然后，登陆成功后，通过计算属性（computed）监视（watch）vuex中id的变化来设置current的值
computed: {
changedId() {
return this.$store.state.id;
}
},
watch: {
changeId: function(val, oldval) {
if (this.$store.state.id === 1) {
this.current = User;
} else if (this.$store.id === 2) {
this.current = Admin;
} else {
this.current = Login;
}
}
}使用这种方法虽然实现了跳转，但是浏览器的url却没有变化： 
也就是说路由似乎变成了多余的。这不符合最初的设想。
也尝试过使用router-link但是这个默认会被vue渲染为a标签，然后通过点击等操作，将router-view替换为指定的组件。更重要的是，虽然跳转了，这个a标签还在页面里。
有的时候问题的解决是偶然性的。这个问题关键点就在我早晨配置webpack路径的时候，被我发现了。
于是乎，我马上将app.vue改回
<div>
<router-view>router-view>
div>
template>问题的关键在路由里，把路由改为如下结构：
export default [
{
path: "/",
redirect: "/login"
},
{
path: "/login",
component: Login
},
{
path: "/admin",
component: Admin
},
{
path: "/user",
component: User
}
]同时，app.vue中的watch也改回去：
watch: {
changeId: function(val, oldval) {
if (this.$store.state.id === 1) {
this.$router.push({path: "user"});
} else if (this.$store.id === 2) {
this.$router.push({path: "admin"});
} else {
this.$router.push({path: "login"});
}
}
}用localhost:3000打开页面，重定向到localhost:3000/login： 
输入用户名user，密码1234后，成功跳转： 
至此，一个让自己满意的登陆跳转页面完成了。
心得体会
文章写到这里，突然觉得这是个很low的问题：就是把/login错当成了/的子目录；如果是从/user/login到/user/user估计不会纠结这么长时间吧。
在这个过程中，倒是把vue、vue-router、vuex相关知识点复习了一遍， 聊以自慰，聊以自慰。。。。
文中有部分序号只要插入图片就会有问题，也不知道为什么><