VUE路由的使用
2019-11-09 本文已影响0人
MaJiT
1.路由的基本用法
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 占位符 -->
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
//注册组件
var register = Vue.extend({
template:'<h2>注册</h2>'
});
var login = Vue.extend({
template:'<h2>登录</h2>'
});
//定义路由并注册
var vueRputer = new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register}
]
});
//使用路由
new Vue({
el:'#app',
router:vueRputer
});
</script>
2.路由的传值
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register/xiaoming">注册</router-link>
<!-- 占位符 -->
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
//注册组件
var register = Vue.extend({
template:'<h2>注册{{onname}}</h2>',
data:function(){
return{
onname:''
}
},
created:function(){
this.onname =this.$route.params.uname
}
});
var login = Vue.extend({
template:'<h2>登录</h2>'
});
//定义路由并注册
var vueRputer = new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register/:uname',component:register}
]
});
//使用路由
new Vue({
el:'#app',
router:vueRputer
});
</script>
