zoukankan      html  css  js  c++  java
  • Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)

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

    复制代码
    // 字符串
    <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

  • 相关阅读:
    Sqlite官方的查询优化文档
    VC++动态链接库(DLL)编程深入浅出(三)转
    用Python查询手机号码归属地
    Delphi使用迅雷的开放下载引擎下载
    Android基础之一
    VC++动态链接库深入浅出(转)
    在Python脚本中使用Delphi控件
    Python与其他语言结合的参数转换函数PyArg_ParseTuple()
    设计模式之模板方法模式(Template)
    设计模式之简单工厂模式(Simple Factory)
  • 原文地址:https://www.cnblogs.com/vicky-li/p/10255324.html
Copyright © 2011-2022 走看看