标签: vue-router

尝试设置Vue路由器。不知道我在做什么错。得到错误

Failed to mount component: template or render function not defined. (found in root instance)

再说一次，我是从React来到Vue的，虽然它们很相似，但是有些小东西却有所不同，而且Vue资源还不多。

我正在使用Webpack模板并使用单个文件组件。我不完全了解的一件事是文档中的这一部分

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

他和我一样import Foo from 'path/to/component/吗？

无论如何，感谢您的所有帮助！

这是我的main.js档案

import Vue from 'vue'
import App from './App'
import QuizBuilder from '../src/components/QuizBuilder.vue'
import ResourceInfo from '../src/components/ResourceInfo.vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { …

vue-router文档未涉及此主题.

也许我期望vue-router 可以处理这个问题,这说明了我对子域运行方式的基本误解.

这可以由vue-router处理,如果是,如何,如果没有,为什么不呢？

我在我的vue-router中使用命名视图.在两个组件内部,我需要获得道具.

以下代码显示了路由的定义.第一个条目不起作用.在组件内部,道具将保持未定义.所以Breadcrumb和Collection组件没有任何属性

第二个例子有效,因为只有一个组件:

const routes = [
    {
        path: '/:cid',
        name: 'collection',
        props: true,
        components: {
            default: Collection,
            breadcrumb: Breadcrumb
        }
    },
    {
        path: '/:cid/:iid',
        name: 'item',
        props: true,
        component: Item
    },
]

我认为只有一个组件时,props属性才有效.

我没有在文档中找到解决方案,所以欢迎任何帮助.

将数据从一个页面传递到另一个页面的简单任务让Vue.js中的新手感到头疼.这是我的路由器

我正在"/"页面上呈现一个表单,它会发出API请求,

我只是想将数据传递到另一个组件的路由页面

在Vue这么难吗？今天对我来说真的很头疼.从API获取数据,保存并发送到另一个组件.我该怎么做？

我是vue-router的初学者,我不能让它工作.当我启动我的应用程序时,我收到以下错误:

[vue-router] Failed to resolve async component render: TypeError: _vm is undefined
49:16:39
[vue-router] uncaught error during route navigation:
49:16:39
TypeError: _vm is undefined
Stack trace:
render@webpack-internal:///63:3:7
resolveAsyncComponents/</<@webpack-internal:///49:1774:17
flatMapComponents/</<@webpack-internal:///49:1801:66
...

这是我的文件:main.js

import Vue from 'vue'
import App from './App.vue'
import router from './routes.js'
import 'bootstrap'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './Home.vue'

export const routes = [
  { name: 'Home', path: '', components: Home …

在我的组件shoppingCart.vue文件中,我正在调用一个简单的方法:

saveCart : _.debounce(() => {
            console.log('hi');
        }, 2000),

但我得到错误:未捕获的ReferenceError:_未定义.

现在得到有趣的部分.如果我将功能更改为例如:

saveCart(){
   console.log(_.random(0, 5));
}

一切都有效,我得到了例子:4.为了使它更有趣,我有一些其他组件正在使用_.debounce,例如搜索用户:

findUsers: _.debounce(
     function (term) 
     {
        let vm = this;
        axios.get('/search', { params: { user: term }})
            .then(response => {
                vm.updateResult(response.data);
            });
    }
  ,500),

它完美无缺.

所以这里有一些背景信息给你.我想我猜测问题在哪里,但我不确定:我正在使用Laravel,我通过bootstrap.js导入Lodash

window._ = require('lodash');

我的组件shoppingCart.vue由Buying.vue调用.Buying.vue被称为

export default new VueRouter({
   mode: 'history',
   routes: [
      {
        path: '/:user/:title',
        component: require('./views/buying/Buying'),
      },
   ],
});

也许问题出在某处,因为vue路由器？但我试图制作一个jsfiddle http://jsfiddle.net/gnu5gq3k/,但我的例子适用于这种情况......在我的现实生活中,test2创建了问题......

可能是什么问题呢？你需要什么样的信息才能更好地理解我的问题？

编辑 我必须做一些我看不到的简单错误:我将代码更改为:

debounce(func, wait, immediate) {

        var timeout;
        return function() {
            var context …

我创建了一个带有页面标题(h1)的vue-router.每个vue-router链接都有一个元标题.如何动态设置我的h1页面标题？

我试过了$emit,但这不适用于我的路由器.如何更改页面标题？

const dashboard = {
  template: `<div>DASHBOARD</div>`
}
const about = {
  template: `<div>ABOUT</div>`
}

const routes = [
  {path: '/dashboard', component: dashboard, name:'dashboard', meta: { title: 'Dashboard' }},
  {path: '/about', component: about, name:'about', meta: { title: 'About' }}
]
const router = new VueRouter({
  routes // short for routes: routes
})

router.beforeEach((to, from, next) => {
  this.$emit('pagetitle', to.meta.title); // DOESN'T WORK!!
  next();
});

new Vue({
  el: '#app',
  router,
  data() {
    return {
      pagetitle: 'not …

我使用Vue-Router将数据从一个组件传递到另一个组件时遇到问题。

我在主要组件中有此模板：

<li><router-link to="/">Daily</router-link></li>
<li><router-link to="/weekly/">Weekly</router-link></li>
<router-view></router-view>

在我的DailyComponent组件中，我具有以下数据功能：

data() {
  return {
    userCount: 0,
  }
}

第二个链接发送到名为的组件WeeklyComponent。

如何将userCount: 0数据从传递DailyComponent到WeeklyComponent，然后在那里显示？

谢谢！

我正在创建一个大量使用vue路由器的VueJS应用程序.

这是我的结构routes.js:

export const routes = [
    { path: '', component: Poetry, children: [
        { path: '', name: 'poetry', component: PoetryLanding },
        { path: 'poetry/:id', name: 'poetrycard', component: PoetryCard },
        { path: 'poetry/search', name: 'poetrysearch', component: PoetrySearch },
    ]},
]

我想在第二个子组件中使用正则表达式,即poetrycard它只接受作为数字的params(:id).我这样做是因为poetrysearch被/search视为受到影响:id!

我试过了:

{ path: 'poetry/:id/[0-9]/g', name: 'poetrycard', component: PoetryCard }

但这不起作用.请帮忙.

我对Vuejs比较新,我现在一直坚持以下错误:(当页面加载时出现)

未捕获的TypeError:无法重新定义属性:$.
  在函数
  .下的函数.defineProperty ()处于函数.(VM2179 vue-router.esm.js:526)
  处的函数.Vue.use(vue.js:4738)
  处的eval(VM2179 vue- router.esm.js:2447)
  at at ../ node_modules/vue-router/dist/vue-router.esm.js(VM2105 app.js:1615)
  at __webpack_require __(VM2105 app.js:712)
  at fn(VM2105) app.js:95)
  eval(VM2178 index.js:3)
  at Object ../ src/router/index.js(VM2105 app.js:2415)
  at __webpack_require__(VM2105 app.js:712)

这个问题似乎没有影响webapp的可用性,我很确定我不会多次声明Vue.use(路由器)......

这是我的index.js文件:(在src/router中)

import Vue from 'vue'
import Router from 'vue-router'
import Blog from '../components/Blog.vue'
import BlogPost from '../components/BlogPost.vue'

Vue.use(Router)
Vue.config.silent = true

export default new Router({
  routes: [
    {
      path: '/blog',
      name: 'Blog',
      component: Blog
    },
    {
      path: '/blog/:slug',
      name: 'Blog-post',
      component: BlogPost
    }
  ]
})

app.ts :(在src,主入口点) …