您的位置：首页 > 产品设计 > UI/UE

11、vue.js 之路由

2017-05-23 21:09 330 查看

路由简单示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="hehe"/>
<meta name="description" content="hehe"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script><!--引入vue.js-->
<script src="js/vue-router.min.js"></script>  <!--引入vue-router.js-->
</head>
<body>
<div id="app"></div>
<script>
/*app模板 可看着整个页面的总模板  用来渲染路由*/
var App = Vue.component('app',{
template: `<div id="app">
<router-view></router-view> /*路由视图*/
</div>`
});

/*home模板*/
var home = Vue.component('home',{
template: '<div><h1>{{content}}</h1></div>',
data:function () {
return {content:'这里是home'}
}
});
/*about模板*/
var about = Vue.component('about',{
template: '<div><h1>{{content}}</h1></div>',
data:function () {
return {content:'这里是about'}
}
});

/*路由*/
var router = new VueRouter({
routes:[
{path:'/home',component:home},/*  /home 的时候渲染home模板   */
{path:'/about',component:about}/*  /about 的时候渲染about模板   */
]
});
new Vue({
el: '#app',
router,//路由
render: h => h(App)//render  页面默认的时候显示的是render指定模块的内容，此处代表默认显示App模块的内容
})
</script>
</body>
</html>

运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航