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

vue1.0简单的使用路由并传参数

2018-02-09 21:53 246 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由</title>
</head>
<script src="vue1.0.11.js"></script>
<script src="vue-router1.0.js"></script>
<body>
<div id="app">
<a href="#" v-link="{path:'/login'}">登录</a>
<a href="#" v-link="{path:'/register/200'}">注册</a>
<!--//还要有一个路由占位-->
<router-view></router-view>
</div>
</body>
<script>
//开始路由代码的编写
//定义三个组件
var App=Vue.extend({});
var login=Vue.extend({
template:'<h1>登录页面</h1>'
});
var register=Vue.extend({
template:'<h1>注册页面{{id}}</h1>',
data:function () {
return {
id:0
}
},
//用生命周期来调用它，这里id1这个值是根据下面设定路由规则的设定来写的，如果下来是id2,那么这里也要跟着它一样
created:function () {
this.id=this.$route.params.id1;

}

});
//    设定路由规则
var router=new VueRouter();
router.map({
'login':{component:login},
'register/:id1':{component:register}
});
//开启路由
router.start(App,'#app');
//默认跳转到/login
router.redirect({'/':'/login'});//表示如果是在/下面，那么就跳转登录页面

</script>
</html>

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

标签：

相关文章推荐

新的分享

章节导航