javascript - 在组件函数中使用 Vue 动态路由名称

标签 javascript vue.js vue-router

我一直在尝试使用 Vue 和 Laravel 进行动态 View 渲染。但是,我不知道应该如何将动态参数解析为组件函数。

Router.map({
    '/cms-admin/:page': {
        component: {
            template: returnView(this.$route.params.page)
        }
    }
});

function returnView (option) {
    // Generate the AJAX request here
}

通过我阅读的文档,$route 应该可以解决问题。我可以将 $route 解析到 View 中,并在页面上打印文本。但是,我不能在 map 中使用 $route 来获取动态名称吗?

比如说,我输入“/cms-admin/dashboard”,“dashboard”应该被解析为模板参数。

提前致谢, 史蒂文

最佳答案

  1. 将页面的各个模板注册为 partials v1 v2
  2. 使用<partial>$route

js:

component: {
  template: '<partial :name="partial" v-if="partial !== ''"></partial>',
  data() { return { partial: '' } },
  ready() { this.partial = this.$route.params.page},
}

注意:不确定是否可以访问this.$routedata() ,因此我使用了 ready()事件,但也许你可以放弃它并直接将其放入 data() .

关于javascript - 在组件函数中使用 Vue 动态路由名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37910707/

相关文章:

html - 使用 CSS 将导航按钮标记为事件

javascript - 为 javascript 定位 div 中的特定类

javascript - React Native 没有从 JS 错误中得到有效的回调

javascript - Axios promise 不会在 vue 方法中抛出错误

vue.js - 如何从 Vue.js v-bind 调用 JavaScript 函数

vue.js - 如何正确使用vue-router?

javascript - 使用 index.ts 文件导出类导致注入(inject)的构造函数中未定义

javascript - 如何在javascript中等待超时的元素

html - 如何使用css在所有方向上旋转图像

vue.js - Vue Router Keep-Alive 包括不工作