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

vue-router.js，入门案例

2017-06-30 17:00 701 查看

理解vue-router的几个简单的概念

<router-link to=''>

<router-view></router-view>

定义路由组件

创建router实例，并定义导航和组件的映射

创建vue实例，注入路由router

demo可直接复制粘贴使用，自行下载vue-router.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router-little-demo</title>
<style type="text/css">
#vuerouter{width: 300px;height: 500px;border: 2px solid #333;border-radius: 3px;margin:60px auto;position: relative;}
.nav{width: 100%;}
.nav a{display: inline-block;background: #eee;width:100%;height: 30px;text-align: center;font-size: 12px;line-height: 30px;border-bottom:1px solid #333;color: #333;text-decoration: none;}
.content{width: 100%;height: 81%;margin-top: 2px;background:#abd8f9;}
.div1,.div2,.div3{width: 100%;height:100%;font-size:18px;text-align:center;}
</style>
</head>
<body>
<div id="vuerouter">
<div class="nav">
<router-link to="/div1">点击模块1</router-link>
<router-link to="/div2">点击模块2</router-link>
<router-link to="/div3">点击模块3</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
<!--
<router-link/> 组件用于帮助用户进行视图导航，也就是我们传统的 <a/> 标签经常做的事。
<a/> 标签用href属性来指定导航的目标地址，而 <router-link/> 组件则用to属性来指定目标地址。
<router-view/> 组件负责渲染匹配到的视图组件，也就是渲染<router-link>指向的目标地址。
-->
</body>
<script src="src/vue.js"></script>
<script src="src/vue-router.js"></script>
<script>
//定义路由对应的三个组件
const vueDiv1 = {
template:`
<div class="div1">这里是div1</div>`                `
};

const vueDiv2 = {
template:`<div class="div2">这里是div2</div>`
};

const vueDiv3 = {
template:`<div class="div3">这里是div3</div>`
}

//创建router实例，并定义导航和组件的映射，路径和模板
const router = new VueRouter({
//配置routes
routes:[
{
path:"/div1",
component:vueDiv1
},
{
path:"/div2",
component:vueDiv2
},
{
path:"/div3",
component:vueDiv3
},
]
})

//创建vue实例，注入路由router
const vuerouter = new Vue({
el:"#vuerouter",
router:router
})

</script>
</html>

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

标签： vue-js

相关文章推荐

新的分享

章节导航