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>
实现了点击不同的菜单，下方显示不同的内容。
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
