<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="../vue1026.js"></script>
<script ype="text/javascript" src="../vue-router1.0.min.js"></script>
<body>
<div id="app">
<a href="#" v-link="{path:'/login'}">login</a>
<a href="#" v-link="{path:'/regist/200'}">regist</a>
<router-view></router-view>
</div>
</body>
<script>
//开始路由编码的编写
var App = Vue.extend({});
var login = Vue.extend({
template: "<h1>登陆界面</h1>"
});
var regist = Vue.extend({
template: "<h1>注册界面{{id}}</h1>",
data:function () {
return{
id:0
}
},
created:function () {
this.id=this.$route.params.id
console.log(this.id);
}
});
var route = new VueRouter;
//设定路由规则
//第一个login是path后面的参数，第二个login是组件的名字
route.map({
'login': {
component: login
},
'regist/:id': {
component: regist
}
});
//开启路由
route.start(
App, '#app'
)
//设定默认路由跳转到login
route.redirect({
'/':'/login'
})
</script>
</html>
Vue1.0路由设置及传参
猜你喜欢
转载自blog.csdn.net/baidu_39001881/article/details/81460775
今日推荐
周排行