<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
var login = Vue.extend({
template:'<h3>登录组件</h3>'
});
var register = Vue.extend({
template :'<h3>注册组件</h3>'
});
var router = new VueRouter({
routes:[
{
path:'/',
redirect:'/login'
},
{
path:'/login',
component:login
},
{
path:'/register',
component:register
}
]
});
const vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router:router,
watch:{
'$route':function (newV,oldV) {
console.log('之前的路由',oldV,'现在的路由',newV);
if(newV.path ==='/register'){
console.log('这是注册组件');
}
else{
console.log('这是登录组件');
}
}
}
})
</script>
</body>
</html>
扫一扫
03-31
1926
1926
09-30
8379
8379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
