1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 <script src="../lib/js/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <router-link to="/login">登录</router-link> 12 <router-link to="/register">注册</router-link> 13 <router-view></router-view> 14 </div> 15 <script> 16 const login = { 17 template:'<h3>奔波儿灞开发</h3>' 18 }; 19 const register = { 20 template:"<h3>灞波儿奔开发</h3>" 21 }; 22 23 const routerObj = new VueRouter({ 24 routes:[ 25 { path:'/login',component:login }, 26 { path:'/register',component:register } 27 ] 28 }); 29 const vm = new Vue({ 30 el:'#app', 31 data:{}, 32 methods:{}, 33 router:routerObj, 34 watch:{ 35 '$route.path':function (newValue,oldValue) { 36 if(newValue ==='/login'){ 37 console.log('欢迎进入登录页面') 38 } else if(newValue ==='/register') { 39 console.log('欢迎进入注册页面') 40 } 41 } 42 } 43 }) 44 </script> 45 </body> 46 </html>
Day4.12watch监视路由地址的改变
猜你喜欢
转载自www.cnblogs.com/zhaohui-116/p/12241513.html
今日推荐
周排行