vue.js 里的路由概念
vue.js里的路由相当于就是局部刷新。点击左边的菜单，右边的内容在不刷新整个页面的情况下，进行局部刷新
vue-router.min.js
为了实现路由，需要一个额外的库： vue-router.min.js
路由代码讲解
<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/vue-router.min.js"></script>
<head>
<style>
a{
text-decoration: none;
}
a.router-link-active{
/* color:blue; */
background-color: lightGray;
}
div.menu{
border:1px solid gray;
float:left;
}
div.menu a{
display:block;
}
div.workingRoom{
margin-left:100px;
}
div#app{
width:500px;
padding:10px;
margin:10px auto;
}
</style>
</head>
<div id="app">
<div class="menu">
<!--
router-link 相当于就是超链
to 相当于就是 href
-->
<router-link to="/user">用户管理</router-link>
<router-link to="/product">产品管理</router-link>
<router-link to="/order">订单管理</router-link>
</div>
<div class="workingRoom">
<!--
点击上面的/user,那么/user 对应的内容就会显示在router-view 这里
-->
<router-view></router-view>
</div>
</div>
<script>
/*
* 申明三个模板( html 片段 )
*/
var user = { template: '<p>用户管理页面的内容</p>' };
var second = { template: '<p>产品管理页面的内容</p>' };
var order = { template: '<p>订单管理页面的内容</p>' };
/*
* 定义路由
*/
var routes = [
{ path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user，没有这个就是空白
{ path: '/user', component: user },
{ path: '/product', component: second },
{ path: '/order', component: order }
];
/*
* 创建VueRouter实例
*/
var router = new VueRouter({
routes:routes
});
/*
* 给vue对象绑定路由
*/
new Vue({
el:"#app",
router
})
</script>更多web前端自学相关知识，请查阅 HTML中文网 ！！
以上就是vue.js什么是路由以及如何进行路由？的详细内容，更多请关注0133技术站其它相关文章！
