这次给大家带来vue.js路由的其他操作，使用vue.js路由其他操作的注意事项有哪些，下面就是实战案例，一起来看一下。
基于当前路径下,跳转到apple
<router-link to="apple">to apple</router-link>
上面的和下面的区别 <router-link :to="{path:'banana'}">to banana</router-link>如果要跳到根目录,在apple前加/
<router-link to="/apple">to apple</router-link>
上面的和下面的区别 <router-link :to="{path:'banana'}">to banana</router-link>如果绑定的话,我们也可以动态的修改路径
<template>
<div id="app">
<router-link :to="path">to apple</router-link>
...... </div></template><script>
export default {
data () { return { path: 'apple'
}
}
}</script>如果绑定的话,不想动态修改路径,我们也可以直接写死,
立即学习“前端免费学习笔记（深入）”；
注意:apple一定要用单引号括起来,不然他会去data里面找apple,会报找不到对象的error
<router-link :to="'apple'">to apple</router-link>
也可以传递参数
<router-link :to="{path:'banana',param:{color:'yellow'}}">to banana</router-link>通过tag,将link变成li标签,当然也可以设置变成其他标签
<router-link :to="'apple'" tag="li">to apple</router-link>
*以上都属于声明式导航
下面感受下编程式导航
可以通过push,跳转到特定的页面
router.push('apple')
或者
router.push({path: 'apple'})
或者name
......应用场景:
当我们每次路由切换的时候,为他设置一些操作
比方说:检查用户的登录状态,如果用户未登录,就通过编程式导航跳转到登录界面
router.beforeEach(router.push('登录界面'))
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上就是Vue.js路由的其他操作的详细内容，更多请关注php中文网其它相关文章！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
397
