H5W3
当前位置:H5W3 > 其他技术问题 > 正文

有关vue-router和vue.js使用

vue小白想请教下vue-router和vue.js共同使用的问题,假如html代码如下:

<div id="app">
    <div class="container">
        <router-view></router-view>
    </div>
    <template id="body1">
        <div class="container">
            <h1>body1</h1>
        </div>
    </template>
    <template id="body2">
        <div class="container">
            <h1>body2</h1>
        </div>
    </template>
    <template id="body3">
        <div class="container">
            <h1>body3</h1>
        </div>
    </template>
</div>

如果使用vue-router来进行路由控制,则需要:

var App = Vue.extend({})
router.start(App, '#app')

同时还想在整个页面中使用vue双向数据绑定,还需要:

var vm = new Vue({
    el: '#app'
})

但是这样实际上是会报错的,提示<router-view>不可以在此处使用。
如果把初始化vm实例的 new Vue 去掉,只使用:

var App = Vue.extend({})
router.start(App, '#app')

则页面可以进行正常显示,vue可以正常使用。但是此时该在何处定义data、method来使用双向绑定?
vue和router在初始化的时候,传入的’#app’这个范围有怎样的限定?
谢谢各位!

回答:

入口的js文件:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from 'App.vue'     // 你的根组件,模版放在这里面
import { configRouter } from './config_router.js'    // 路由的配置文件

Vue.use(VueRouter)

var router = new VueRouter()
configRouter(router)
router.start(App, 'app')

回答:

var App = Vue.extend({})

同学你传进去的是一个空对象啊,把你要绑定的data传进去就行了呗,具体看这里

本文地址:H5W3 » 有关vue-router和vue.js使用

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址