vue中的路由用于页面的跳转,可以实现局部刷新。
关键在于<router-link to="这里是跳转后显示的模块"></rouuter-link>
,其实<router-link></router-link>
就相当于一个超链接,设置了<router-link></router-link>
之后,to=" "
所指向的模块将显示在<router-view></router-view>
中。
例子:首先引入vue.js和vue-router.js
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<router-link to="/one">菜单一</router-link>
<router-link to="/two">菜单二</router-link>
<router-link to="/three">菜单三</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
//定义不同的组件
var one = {template:'<p>我是菜单一的内容</p>'};
var two = {template:'<p>我是菜单二的内容</p>'};
var three = {template:'<p>我是菜单三的内容</p>'};
// 定义路径
var routes = [
{ path: '/', redirect: '/one'}, // 这个表示会默认渲染
{path:'/one',component:one},
{path:'/two',component:two},
{path:'/three',component:three}
];
//定义路由
var router = new VueRouter({
routes: routes
})
//绑定路由
new Vue({
el: '#app',
router
})
</script>
</body>
</html>
实现了点击不同的菜单,下方显示不同的内容。