有时候,我们可能希望手工去改变应用程序的地址,比如,用户在访问一个笔记内容的时候,你可以验证一下用户是不是已经登录了,没有没登录,你可以让应用程序的地址换成登录的地址,要求用户先登录 ...
实现这个功能,可以使用 navigate 方法 ...
下面,我们先去定义一个路由 ... 在这个 routes 属性里面 .
路由的地址是 login ,表示用户登录的地址 ... 然后可以再加上一个可选的部分,标记一下用户登录以后要返回的那个地址 ... 用一个 *from 来作为这个地址里的参数 ... 一个星号加上参数的名字,表示这是一人 splat 类型的参数 .. 它可以表示地址里面的多个部分 ...
也就是如果用户在访问 notes/1 这个笔记的时候,这个 notes/1 就是这个登录以后返回的目的地 .. 这样用户在登录成功以后,可以继续查看他之前想要看的那条笔记 ...
用 login 这个函数去处理它 ...
'login(/from/*from)': 'login'
下面,再去定义这个 login 函数 ... 函数接收 des 作为它的参数 ... 然后在控制台上,输入一行文字 ...
login: function(from) {
console.log('请先登录... 目的地:' + from);
}
下面,我们在这个 show 函数里面,使用一个 navigate 方法 ... 在这里,你可以判断用户是不是已经登录了 ... 没有的话,就是执行这个 navigate 方法 ... 把用户带到登录的页面 ...
不过这里,我们为了简单点,可以直接使用这个方法 ... this.navigate ... this 表示当前的这个路由器对象 ..
这个方法的第一个参数是一个地址 ... 'login/from/notes/' + id
我们要访问的地址是 login 斜线 des 斜线 id 号,这个 id 号就是用户当前要访问的这个笔记的 id 号,这个 id 号可以作为 login 这个路由上面的目的地部分的那个 des 参数的值 ...
默认情况下,这个 navigate 方法,只会改变应用的地址,并不会触发 haschange 事件,也就是,不会去执行跟这个地址对应的函数 ... 如果想要触发 hashchange 事件的话 ...
需要在这个方法的选项参数里,把 trigger ,设置成 true ...
this.navigate('login/from/notes/' + id, {trigger: true});
保存一下 ... 回到浏览器 ...
先刷新一下 ... 然后可以访问 #notes 斜线 ... 随便加上一个笔记的 id 号 ... 125 ... 回车 ...
注意,应用程序的地址会变成 #login/from/notes/125
因为我们在处理这个 #notes/:id 地址的函数里面,使用了一个 navigate 方法,手工的改变了应用程序的地址 ..
在这个方法里面,我们把 trigger 选项的值设置成了 true ...
所以,会去执行处理这个 #login 地址的函数 ...
在控制台上,会显示 请先登录 ... 目的地是 notes/125 ...