vue router html后缀,vue-router-demo.html

Vue入门之extend全局方法

ul, li { list-style: none; }

ul { overflow: hidden; }

li { float: left; width: 100px; }

h2 { background-color: #903;}

---

email to: {{ email }}

---

var topbarTemp = `

• {{ item.name }}

`;

// 定义组件：topbar

Vue.component('top-bar', {

template: topbarTemp,

data: function () {

return {

NavList: [

{ name: '首页', url: '/home'},

{ name: '产品', url: '/product'},

{ name: '服务', url: '/service'},

{ name: '关于', url: '/about'}

]

}

}

});

Vue.component('footer-bar', {  // 定义组件 footerbar

template: `

---

版权所有@flydragon

`

});

// 创建home模块

var home = {

template: `

{{ msg }}

`,

data: function () {

return { msg: 'this is home view' }

}

};

// 创建product 模块

var product = {

template: `

{{ msg }}

`,

data: function () {

return { msg: 'this is product view' }

}

}

// 创建service 模块

var service = {

template: `

{{ msg }}

`,

data: function () {

return { msg: 'this is service view' }

}

}

// 创建about 模块

var about = {

template: `

{{ msg }}

`,

data: function () {

return { msg: 'this is about view' }

}

}

// 定义路由对象

var router = new VueRouter({

routes: [

{ path: '/home', component: home },

{ path: '/product', component: product },

{ path: '/service', component: service },

{ path: '/about', component: about }

]

});

// 初始化一个Vue实例

var app = new Vue({

el: '#app',

data: {

email: 'flydragon@gmail.com'

},

router: router

});