<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue动态路由匹配</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const Login = {
template:'<div>我是登录,用户:{{$route.params.userName}}</div>'
};
const Register = {
template:'<div>我是注册,用户:{{$route.query.userName}}</div>'
};
const routes = [
{ name:'login' , path: '/login/:userName', component: Login },
{ name:'register' , path: '/register', component: Register }
]
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
Vue.component('Vroute',{
data(){
return {
};
},
template:'<div><router-link :to="{name:\'login\',params:{userName:1}}">登录</router-link><router-link :to="{name:\'register\',query:{userName:2}}">注册</router-link><router-view></router-view></div>'
});
new Vue({
el:'#app',
data(){
return {
};
},
template:'<Vroute/>',
router //使路由生效
});
</script>
</html>