<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="../vue221.js"></script>
<script ype="text/javascript" src="../vue-router231.js"></script>
<body>
<div id="app">
<router-link to="/login">login</router-link>
<router-link to="/regist/fvfdvdf">regist</router-link>
<router-view></router-view>
</div>
</body>
<script>
//开始路由编码的编写
var App = Vue.extend({});
var login = Vue.extend({
template: "<h1>登陆界面</h1>"
});
var regist = Vue.extend({
template: "<h1>注册界面{{name}}</h1>",
data:function () {
return{
name:''
}
},
created:function () {
this.name=this.$route.params.name
}
});
//2.0实例化路由规则对象
var route = new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{
path:'/login',component:login
},
{
path:'/regist/:name',component:regist
},
]
});
//3.0开启路由对象
new Vue({
el:'#app',
router:route
})
</script>
</html>
Vue2.0路由的写法及传参
猜你喜欢
转载自blog.csdn.net/baidu_39001881/article/details/81474989
今日推荐
周排行