路由的基本用法

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

给路由起个名字,可以方便以后使用。比如这个 /events 路由 .. 我们给它添加一个名字 .. 用一个 name 属性,对应的值就是这个路由的名字 .. 可以叫它 events ..

再打开 index.html .. 这里我们用了 router-link 创建了一个链接 .. 这里直接使用了 to 属性,设置了一个静态的地址 .. 现在我们可以改造一下 .. 绑定一个 :to 里面用一下 name ,路由的名字是 events ..

回到浏览器 .. 打开首页 .. 再打开 活动 .. 同样会显示活动页面 ..

我们可以修改一下这个 events 路由的地址 .. 比如改成 /ravens ..

回到浏览器 .. 打开 首页 .. 再打开 活动 .. 因为创建活动链接的时候绑定了路由的名字 .. 路由的地址发生了变化,我们也不需要修改这个链接的地址 ..

这里我们再把 events 路由的地址恢复成原来的 events ..

代码控制路由

我们可以用代码控制打开的地址 .. 可以使用 router 实例的 push 方法 .. 可以直接给它一个地址 .. 比如 / .. 你会发现,现在打开的是首页 ...

也可以这样 ..router.push .. 一个对象 .. 添加一个 name 属性,对应的值就是路由的名字 .. 比如 events

现在打开的就是活动页面 .. 在这个对象里面,还可以添加 params .. 或者 query .. 添加一个 query .. 一个对象 .. 里面是查询符还有对应的值 .. 比如先随便添加一个查询符,名字是 filter .. 对应的值是 popular ..

执行一下 ..

你会看到现在地址上会出现一个 filter 查询符 .. 对应的值就是 popular

别名,重定向

路由可以有个别名 .. 在这个 events 里面,添加一个 alias .. 地址是 /event .. 这样用户访问 events ,或者 alias 里的 event ,都可以 ..

到浏览器上试一下 .. 访问 events ... 还有 event .. 都会打开活动页面 ..

还有个 redirect .. 可以重定向 .. 添加一个新的路由 .. path 是 /home .. 再用一个 redirect .. 重定向到的地址是 / , 或者可以设置一个路由的名字 .. 给它一个对象 .. 用一个 name,指定一下路由的名字 .. 比如 home ..

找到 / 这个路由 .. 给它起个名字 .. 添加一个 name 属性 ... 名字是 home ..

回到浏览器 .. 访问一下 /home ... 会被重定向到 / 这个地址 ..

0:00
0:00
2:46

路由的基本用法《 Vue.js:路由 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点