跳到主要内容

字段href

Online开发如何配置 Href 跳转

此控件只支持在线使用，不支持代码生成。

效果演示​

配置了 href 的字段将会显示为超链接，可以点击跳转到你配置的界面，如下图所示

配置位置​

配置方式​

直接在输入框里输入你要跳转的地址即可，可以传递参数，目前支持三种跳转方式，分别为

  1. http或https链接跳转
  2. 路由(router)地址跳转
  3. 内部组件跳转

配置实例：http或https链接跳转​

假如说我想跳转到百度页面，可以在字段href里填写 https://www.baidu.com，注意，开头的http或https一定要填写，如果不填就会被识别成“路由地址跳转”。

配置实例：路由(router)地址跳转​

假如说我想跳转到菜单里配置的某个页面，就输入该菜单的路径即可

比如首页的路径为/dashboard/analysis

那么只需填写到输入框里即可

配置实例：内部组件跳转​

假如说我写了一个组件，而且没有配置成菜单，但也想在这里打开的时候，就可以使用内部组件跳转。

你只需要提供一个组件的路径，如下图所示：

注意，你只能使用 /src/views 下的所有组件，且填写时开头无需填写 /，且一定要包含.vue，否则将会被识别成“路由地址跳转”。

比如我要弹出一个自定义的页面，页面代码位置如下图所示：

配置字段href：demo/hello/index.vue

如何传参​

无论是哪一种配置方式，都采用问号(?)的方式传参，多个参数用&符号分割

?name=zhangsan&age=23&sex=男

可使用变量​

你可以在参数里使用变量，变量的名称取决于你配置了哪些字段

如上图所示，我的配置中有一个teacher_name字段，那么我就可以在使用的时候取出来，传给你配置的链接

?name=${teacher_name}&ohh=233

实际使用中，如果我点击了 赵六

那么实际参数会被转换为

?name=赵六&ohh=233

如何接收参数​

http或https链接跳转​

可以在后台用 request 获取

路由(router)地址方式​

参考代码：

watch: {
  $route: {
    immediate: true,
    handler() {
      console.log('============= online href  $route props ============= ');
      let sex = this.$route.query.sex
      console.log('$route sex: ', sex);
    }
  }
},

内部组件方式​

内部组件使用 props 来接收参数，传给组件的类型永远都是String类型，所以你试图用其他类型（如Number）接收的时候会报错。

特殊用法​

占位符效果备注
{{ACCESS_TOKEN}}获取当前登录的Tokenv3.6.3起支持