<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由的传值</title>
</head>
<body>
<!--定义模板-->
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register/haha">注册</router-link>
<!--占位符-->
<router-view></router-view>
</div>
</body>
</html>
<script src="vue2.js"></script>
<script src="vue-router.js"></script>
<script>
// 定义根组件
var App = Vue.extend()
//定义注册组件
var register=Vue.extend({
// 显示传过来的值
template:'<h1>我是注册{{onName}}</h1>',
// 接受传过来的值
data:function () {
return{
onName:'',
}
},
// 赋值
created:function () {
this.onName=this.$route.params.unName
}
})
//定义登录组件
var login=Vue.extend({
template:'<h1>我是登陆</h1>'
})
// 定义路由并且注册路由规则
var vueRputer=new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
// 设置要传的值
{path:'/register/:unName',component:register},
]
})
// 使用路由
new Vue({
el:'#app',
router:vueRputer
})
</script>
