vue Blog 学习笔记 (3) 路由和组件加载关系

a 链接跳转
this.$router.push('/dashboard/home')

get 从接口获取数据
this.$http.get('comment/' + this.$route.params.id + '/edit')

post 提交表单
this.$http.post('comment/' + this.$route.params.id, this.comment)

this.$route.params.id
You can have multiple dynamic segments in the same route, and they will map to corresponding fields on $route.params. Examples:

后台 vue 结构

webpack.mix.js 定义别名
resolve: {
    alias: {
      'components': 'assets/js/components',
      'config': 'assets/js/config',
      'lang': 'assets/js/lang',
      'plugins': 'assets/js/plugins',
      'vendor': 'assets/js/vendor',
      'views': 'assets/js/views',
      'dashboard': 'assets/js/views/dashboard',
    },
    modules: [
      'node_modules',
      path.resolve(__dirname, "resources")
    ]
  },

后台入口
resources/views/dashboard/index.blade.php
  引用 <script src="{{ mix(js/app.js) }}"></script>


app.js 文件中
  import App from './App.vue'

 Vue.use 使用全局组件
  Vue.use(httpPlugin);
  Vue.use(VueI18n);
  Vue.use(VueRouter);

  Vue.component() 构建组件，使用自定义组件
  Vue.component(
    'vue-table-pagination',
    require('components/dashboard/TablePagination.vue')
  );
  Vue.component(
    'vue-table',
    require('components/dashboard/Table.vue')
  );
  Vue.component(
    'vue-form',
    require('components/dashboard/Form.vue')
  );
  

路由和模板

resources/assets/js/App.vue
<template>
  <router-view></router-view>
</template>
router-view

resources/assets/js/routes.js
后台路由，定义了后台的路由和模板
import Dashboard from 'views/Dashboard.vue'
import Parent from 'views/Parent.vue'

{
  path: 'comments',
  component: Parent,
  children: [
    {
      path: '/',
      component: () => import('dashboard/comment/Comment.vue')
    },
    {
      path: ':id/edit',
      component: () => import('dashboard/comment/Edit.vue')
    }
  ]
},

resources/assets/js/views/dashboard/comments/Comment.vue
<template>
  <div class="row">
    <vue-table :title="$t('page.comments')" :fields="fields" api-url="commentc" 
        show-paginate @table-action="tableActions">
    </vue-table>
  </div>
</template>

App.vue
Dashboard.vue
Parent.vue
Comment.vue
这几个组件文件，是怎么组合起来使用的呀？
通过 routes.js 吗, 路由中的 component: Parent 什么作用？删掉后，页面数据为空，也不报错

把首页的路由调整一下
如果写成
{
  path: 'home',
  component: () => import('dashboard/Home.vue')
}
或者
{
  path: 'home',
  component: Parent,
  children: [
    {
      path: '/',
      component: () => import('dashboard/Home.vue')
    }
  ]
}
这两种写法都是正常的,页面不报错，数据也是正常显示的

如果写成
{
  path: 'home',
  children: [
    {
      path: '/',
      component: () => import('dashboard/Home.vue')
    }
  ]
}
页面不报错，就是数据不显示



VUE forum 上看到一个讨论，给出了嵌套children 和 分开写路由的两个例子，觉得挺好的
嵌套的路由，父级路由里面还是要有 component 选项，譬如该项目的 Parent.vue 文件，虽然就 3 行，命名规则还是需要
<template>
  <router-view></router-view>
</template>


var router = new VueRouter({
  routes: [{
    path: '/',
    name: 'home',
    component: Home
  }, {
    path: '/dashboard/:slug',
    name: 'dashboard',
    props: true,
    component: Dashboard
  }, {
    path: '/dashboard/:slug/profile',
    name: 'profile',
    props: true,
    component: Profile
  }, {
    path: '/dashboard/:slug/settings',
    name: 'settings',
    props: true,
    component: Settings
  }]
});

var router = new VueRouter({
  routes: [{
    path: '/',
    name: 'home',
    component: Home
  }, {
    path: '/dashboard/:slug',
    component: DashboardRoot,
    children: [{
      path: '/',
      name: 'dashboard',
      props: true,
      component: Dashboard
    }, {
      path: 'profile',
      name: 'profile',
      props: true,
      component: Profile
    }, {
      path: 'settings',
      name: 'settings',
      props: true,
      component: Settings
    }]
  }]
});

Failed to mount component: template or render function not defined.

Your HTML in a single file component needs to be wrapped in template tags.
Component template should contain exactly one root element

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

ìndex.html contains a template in the DOM:

<div id="div">
  {{message}}
</div>

it's not explicitly defined as a template, like what you probably think of:

<template>
  <div id="div">
    {{message}}
  </div>
</template>

But it's still HTML that Vue has to convert into a render function in order to work. The render function would look like this:

render(h) {
  return h('div', {attrs: {id: 'app'}, this.message}
}

Outside of single file components (for which vue-loader compiles the render functions from the templates in the build process of your app), this compilation can only be done during runtime, in the browser, and this requires the standalone version of Vue.

How to create a comment system with Laravel 5.3 and Vue.Js

<template>
  <div class="container">
    <h4>Add Comment</h4>
    <form action="" @submit.prevent="edit ? editComment(comment.id) : createComment()">
      <div class="input-group">
        <textarea name="body" v-model="comment.body" ref="textarea" class="form-control"></textarea>
      </div>
        <div class="input-group">
          <button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
          <button type="submit" class="btn btn-primary" v-show="edit">Edit Comment</button>
        </div>
    </form>
    <h4>Comments</h4>
      <ul class="list-group">
        <li class="list-group-item" v-for="comment in comments">
          {{comment.body}}
          <a class="btn btn-default" v-on:click=" showComment(comment.id)">Edit</a>
          <a class="btn btn-danger" v-on:click=" deleteComment(comment.id)">Delete</a>
        </li>
      </ul>
  </div>
</template>

@submit.prevent: The @ symbol is equivalent to on:submit. Using submit.prevent we prevent the default action, which is to submit the form for the URL in the action attribute. Instead, we send the form to the one of the defined functions.

edit ? editComment(comment.id) : createComment(): Here we have two functions in a ternary operation. If the edit property is true, send the submited data to editComment(). If not, send do createComment(). Both these functions, as well the edit value, will be set in the script section below.

v-show="!edit" & v-show="edit": v-show enables the toggle property in the element. In this case, the element will be toggled if the edit variable is false. In the same way, by setting v-show=”edit” in the element below we indicate that we want to display the element when the edit variable is true

• [Vue warn]: Error in event handler for "table-action": "TypeError: this.$router.delete is not a function"
  this.$router.push 链接跳转
  this.$http.delete 请求 PHP 获取数据
  • resources\assets\js\config\base.js
    export const apiUrl = '/api/'
  • resources\assets\js\plugins\http\index.js
    import axios from 'axios'
    import { apiUrl } from 'config/base'
    export const http = axios.create({
    baseUrl: apiUrl,
    })

this.$route.params.id vue 从当前的 url 获取参数值