js代码:
/**
* Created by luoxy on 2018/5/28.
*/
var routes = [ //定义规则
{
path:'/', //使用'/'符号代表首页路径
component:{
template:'<div><div>首页</div></div>'
}
},
{
path: '/about', //使用/about代表关于我们界面路径
component: {
template: '<div><div>关于我们</div></div>'
}
},{
path:'/user/:name',
component:{
template:
'<div><div>姓名{{$route.params.name}}</div><div>age{{$route.query.age}}</div></div>'
//两种获取参数的方法:{{$route.params.name}}---获取html页面中的参数
//{{$route.query.age}}----在地址栏查询方式获取数据
},
];
var router = new VueRouter({ //将规则赋给路由的路径
routes : routes,
});
new Vue({ //定义vue将路由赋给路由
el:"#app",
router:router,
})
html代码:
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to='/user/whh'>whh</router-link>
<router-link to='/user/llz'>llz</router-link>
</div>
<div>
<router-view></router-view> //路由展现的视图,只有有这个标签才能显示出路由中的东西
</div>
</div>