vue路由跳转 前端路由与vue-router的基本用法( 二 )
& lt模板>。
& ltdiv>。{ { $ route . params . id } } & lt；/div>。
& lt/template>。
& lt>。
导出默认值{
已安装(){
console.log(此。$route.params.id)
}
}
& lt/>。
这个。$route在这里可以访问很多关于当前路由的信息，可以打印出来看看里面有什么，里面的数据在开发中经常用到。
因为配置的路由是"/user。/id "，直接访问localhost:8080/用户会被重定向到/index，需要带一个id才能到达user.vue，比如locahost:8080/user/123456
第三，路线跳跃
1.vue-router有两种跳转页面的方法。第一种方法是使用内置的
// index.vue
& lt模板>。
& ltdiv>。
& ltp>。主页
& ltrouter-link to="/about " >到大约
& lt/div>。
& lt/template>。
其用法与一般部件相同。to是道具指向跳跃的路径。当然，v-bind也可以动态设置。
2 、& lt路由器-链接>;还有其他常用道具，有:
标签:
标签可以指定要呈现的标签，例如
替换:
使用替换很难留下历史记录，因此您不能在导航后使用后退按钮返回上一页，如下所示:
& ltrouter-link to = "/about " replace & gt。& lt/router-link >
活动:
什么时候
第四，路由的高级用法
Vue-router还为我们提供了路由导航钩子beforeEach和afterEach，在路由改变前后都会触发。
导航挂钩有三个参数:
至:要输入的目的地的工艺路线对象
自:当前导航将要离开的路由对象
下一步:在调用此方法之前，不能输入下一个钩子
有了这两个钩子，你可以做很多事情来提升用户体验，比如一个很长的页面，滚动到某个位置，跳转到另一个页面，滚动条默认到上一页停留的位置，好的体验一定可以回到顶部。您可以通过在每个:
// main.js
router.afterEach每个((to，from，next) = >个；{
window.scrollTo(0，0)
})
类似的要求是，当从一个页面转换到另一个页面时，可以出现全局加载动画，并且动画可以在页面加载后完成。
next()方法也可以设置参数，比如下面的场景。有些页面需要检查是否登录。如果已经登录，可以访问；否则，他们将跳转到登录页面。这里很容易判断是否通过localStorage登录。示例代码如下:
router.beforeEach各((to，from，next)= >个；{
if(window . LocalStorage . GetItem(' token ')){
下一个()
} else {
下一步('/登录')
}
})
导航钩子的正确使用可以方便一些全局功能的实现，更多的需要在开发的业务逻辑中不断探索。
以上是vue-router的主要用法，多练习就能掌握。
【vue路由跳转 前端路由与vue-router的基本用法】
文章图片
推荐阅读
- 穿墙路由器 华为新品4G路由器评测：穿墙效果真不差 双宽带加速技术很有料
- 伊甸|《另一个伊甸：超越时空的猫》试玩：跳转时空，拯救未来
- 触手控 华硕八爪鱼AX11000万兆路由测试
- 华硕ac86u 华硕AC86U路由器最佳设置
- 宽带猫和路由器的区别 光猫和路由器的区别
- 无线宝 京东云无线宝是噱头 回本之后二刷千兆路由京东云无线宝至尊版
- R星官网移除《Agent》图标 网址跳转R星主页
- 带猫功能的无线路由器 消费提醒 带无线路由器功能的光猫可以用吗
- 流星群侠传新版本玩“穿越”？出剧情让玩家秒跳转永劫无间地图！
- mw320r 超强信号可穿墙 水星MW320R 无线路由