[原创] vue开始踩坑-1

vue webpack

2016-11-30 1213

vue的文档有中文版的,对于那些有阅读障碍的人来讲,无疑不是一件幸事。

http://cn.vuejs.org/

安装官方文档的介绍,一步步试一下之后发现相较于1.x的版本表面看起来改变不是很大。但是仔细阅读作者的说明,还是有很大改变的。废话不多说了。

首先和以前一样,通过vue-cli创建一个应用先体验一下。

https://github.com/vuejs/vue-cli

路由使用:http://router.vuejs.org/zh-cn/essentials/getting-started.html

参照路由相关内容,实现页面路由跳转

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

Vue.use(VueRouter)

const Home = {
    template:'<div>Home Page</div>',
    //路由进入之前 获取传递的参数
    //to.query中是url传递的参数
    beforeRouteEnter(to,from,next){
        console.dir(to)
        console.dir(from)
        console.dir(next)
    }
}
const List = {template:'<div>List Page</div>'}

const routes = [
    {path:'/home',component:Home},
    {path:'/list',component:List}
]
const router = new VueRouter({
    routes
})

/* eslint-disable no-new */
new Vue({
    el: '#app',
    template: '<App/>',
    components: { App },
    router
})