详解设置路由导航的两种方法

一、<router-link :to="...">
　　to里的值可以是一个字符串路径，或者一个描述地址的对象。例如：

router-link 标签添加事件@click 、@mouseover等无效的情况
在router-link上添加事件的话需要@click.native这样写

// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query，地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query，地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

二、router.push(...)方法
　　同样的规则也适用于router.push(...)方法。

// 字符串
router.push('apple')
// 对象
router.push({path:'apple'})
// 命名路由
router.push({name: 'applename'})
//直接路由带查询参数query，地址栏变成 /apple?color=red
router.push({path: 'apple', query: {color: 'red' }})
// 命名路由带查询参数query，地址栏变成/apple?color=red
router.push({name: 'applename', query: {color: 'red' }})
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
router.push({path:'applename', params:{ color: 'red' }})
// 命名路由带路由参数params，地址栏是/apple/red
router.push({name:'applename', params:{ color: 'red' }})

三、注意点

1、关于带参数的路由总结如下：

无论是直接路由“path" 还是命名路由“name”，带查询参数query，地址栏会变成“/url?查询参数名：查询参数值“;
直接路由“path" 带路由参数params params 不生效;
命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;

2、设置路由map里的path值：

带路由参数params时，路由map里的path应该写成: path:'/apple/:color' ;
带查询参数query时，路由map里的path应该写成: path:'/apple' ；

3、获取参数方法：

在组件中： {{$route.params.color}}
在js里： this.$route.params.color

详解设置路由导航的两种方法相关推荐

QTextEdit详解(设置显示内容的两种方式（setPlainText/insertPlainText、滚动条自动(往下、往上)滚动……)
目录一.设置显示内容的两种方式(setPlainText/insertPlainText) 二.滚动条自动(往下.往上)滚动三.如何设置背景颜色/背景图片一.设置显示内容的两种方式(setPla ...
java sort 第二个参数_详解java Collections.sort的两种用法
Collections是一个工具类,sort是其中的静态方法,是用来对List类型进行排序的,它有两种参数形式: public static > void sort(List list) { l ...
vue路由跳转写法在html,详解vue 路由跳转四种方式 (带参数)
1. router-link 1. 不带参数 //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由 ...
java 数组合并_拼接_详解Java合并数组的两种实现方式
详解Java合并数组的两种实现方式发布于 2020-7-27| 复制链接摘记: 最近在写代码时遇到了需要合并两个数组的需求,突然发现以前没用过,于是研究了一下合并数组的方式,总结如下.1.Syst ...
python调用cmd命令释放端口_详解python调用cmd命令三种方法
目前我使用到的python中执行cmd的方式有三种使用os.system("cmd") 该方法在调用完shell脚本后,返回一个16位的二进制数,低位为杀死所调用脚本的信号号码, ...
详解Java解析XML的四种方法
http://developer.51cto.com 2009-03-31 13:12 cnlw1985 javaeye 我要评论(8) XML现在已经成为一种通用的数据交换格式,平台的无关性 ...
win10定时关机c语言,Win10系统怎么定时关机？Windows10设置定时关机的两种方法
最近,有位刚刚升级win10系统的用户反映自己在使用完电脑后经常会忘记手动关机,因此为了能够更好地保护电脑,希望在新系统中设置定时关机.这该如何操作呢?接下来,小编就向大家分享Windows10设置定 ...
python可以播放音乐吗_详解python播放音频的三种方法
第一种使用pygame模块 pygame.mixer.init() pygame.mixer.music.load(self.wav_file) pygame.mixer.music.set_vol ...
计算机被填充背景花束纹理在那,为艺术字设置纹理填充的两种方法
Word2007系统中的纹理效果同样可以应用于艺术字的填充.文字表面添加纹理填充使文字看起来富于质感和立体感,word文档自带的已经有很多可供选择的漂亮纹理,用户在使用中根据其展示效果选择需要的纹理填 ...

详解设置路由导航的两种方法

详解设置路由导航的两种方法相关推荐

最新文章

热门文章