Question

我尝试从网址获取参数

让我们说网址包含：

localhost:8000/blog?q=hello

我想抓住hello来触发函数调用

我在laravel webpack的app.js中声明的内容：

import VueRouter from 'vue-router';
Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes: []
})

const app = new Vue({
    router
});

export default app;

在博客页面中，我尝试从url中提取参数

new Vue ({
       el: "#blog-content",
   },

   mounted: function() {
       q = this.$route.query.q
       console.log(q)
   }
)

我npm run dev编译并运行显示错误的博客页面：

TypeError: Cannot read property 'query' of undefined

怎么了？我确定应用程序中已正确安装了Vue Router。

Answer 1

我认为您使用的博客页面不正确。

您重新创建另一个Vue实例，在这种情况下，新实例没有传递给它的路由器。因此，我认为这就是this.$router未定义的原因。

此外，您不会将视图组件传递给路由器，因此它不知道要使用特定的URL查找什么内容。

这是您的app.js文件已更正

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import Blog from './views/Blog';

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/blog',
            name: 'blog',
            component: Blog
        },
    ]
});

博客视图页面模板：views/Blog.vue

<template>
    <div class="wrapper">
         My blog page
    </div>
</template>


<script>
    export default {
        data() {
            return {
                myvariable : ''
            }
        },
        mounted() {
            let q = this.$route.query.q;
            console.log(q);
        },
    };
</script>

现在它应该可以正常工作了：）

编辑：同样，您也不需要导出app中的app.js变量

删除文件末尾的export default app;行

laravel + vue路由器无法从url获取参数

1 个答案: