<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue2.513.js "></script> <script src="vue-router2.0.js"></script> </head> <body> <div id="app"> <router-link to="/login">登录</router-link> <router-link to="/register/itcast">注册</router-link> <router-view></router-view> </div> </body> <script> //1.0准备三个组件 var App=Vue.extend({}); var login=Vue.extend({ template:'<div><h1>登录</h1></div>' }); var register=Vue.extend({ template:'<div><h1>注册{{name}}</h1></div>', data:function () { return{ name:'' } }, //使用生命周期函数 created:function () { this.name=this.$route.params.name; } }); //2.0实例化路由规则对象 var router=new VueRouter( { routes:[//数组里面给它两个对象 {path:'/',redirect:'/login'},//这个是设置默认路由 {path:'/login',component:login}, {path:'/register/:name',component:register}//这样路由对象就定义好了 ] }); //开启路由对象 new Vue({ el:'#app', router:router,//开启路由对象 //用watch来监控路由对象 watch:{ '$route':function (newroute,oldroute) { //console.log(newroute,oldroute); //将来就可以在这个函数中获取到当前的路由规则字符串是谁了 //那么久可以针对一些特定的页面做一些特定的处理 } } }); </script> </html>
watch来监控路由对象
猜你喜欢
转载自blog.csdn.net/weixin_40593587/article/details/79311194
今日推荐
周排行