一，Vue路由系统
Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，能够轻松构建单页应用
1.路由的注册
<body> <div id="app"> <router-link to="/">首页</router-link> //在渲染的时候汇编翻译为a标签，to的参数则会作为href参数 <router-link to="/course">课程</router-link> <router-view></router-view> //渲染组件内的视图 </div> <script> // 定义路由跟组件的匹配规则 let url = [ { path: "/", component:{ template:`<div><h1>这是首页组件</h1></div>` } }, { path: "/course", component:{ template:`<div><h1>这是课程组件</h1></div>` } } ]; //规则对象,路由跟组件的匹配规则 //实例化VueRouter( let router = new VueRouter({ routes:url, // mode:"history" //可以去掉url中的#(锚点)，但是正常正常会404 }); // 把VueRouter的实例化对象注册到Vue的根实例里 const app = new Vue({ el:"#app", // data: {}, router: router, }) </script> </body>
2.路由的命名参数
<body> <div id="app"> <router-link :to="{name: 'home'}">首页</router-link> <router-link :to="{name: 'course'}">课程</router-link> <!--<router-link :to="/user/alex?age=38">用户</router-link>--><!--硬编码写法--> <router-link :to="{name: 'user',params: {name: 'alex'},query: {age: 38}}">用户</router-link> <!--params相当与django的分组命名匹配,query相当于url中?后面的参数--> <router-view></router-view> </div> <script> // 定义路由跟组件的匹配规则 let url = [ //规则对象,路由跟组件的匹配规则 { path: "/", name: "home", component:{ template:`<div><h1>这是首页组件</h1></div>` } }, { path: "/course", name:"course", component:{ template:`<div><h1>这是课程组件</h1></div>` } }, { path: "/user/:name", // /user/alex url // {name:alex} params // (?P<name>.*) 分组命名匹配 name: "user", component: { template:`<div> <h1>这是用户组件{{this.$route.params.name}}</h1> <h1>{{this.$route.query.age}}</h1> </div>`, mounted() { console.log(this.$route) } } } ]; //实例化VueRouter( let routers = new VueRouter({ routes:url }); const app = new Vue({ el: "#app", data: {}, router: routers }) </script> </body>
3手动路由
<body> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/login">登录</router-link> <router-view></router-view> </div> <script> // 定义路由跟组件的匹配规则 let url = [ { path: "/", component:{ template:`<div> <h1>这是首页组件</h1> <button @click="my_click">点击我跳转到登录页面</button> </div>`, methods: { my_click: function () { //跳转到登录页面，跳转到登录组件 console.log(this.$route); console.log(this.$router); console.log(this.$el); console.log(this.$data); //$route 路由的所有信息 //$router 实例对象 this.$router.push("/login") //手动路由 } } } }, { path: "/course", name:"course", component:{ template:`<div><h1>这是课程组件</h1></div>` } }, { path: "/login", name:'login', component:{ template:`<div><h1>这是登录组件</h1></div>` } }, ]; //规则对象,路由跟组件的匹配规则 //实例化VueRouter( let routers = new VueRouter({ routes:url }); // 把VueRouter的实例化对象注册到Vue的根实例里 const app = new Vue({ el: "#app", data: {}, router: routers, }) </script> </body>
4.路由的钩子函数
<body> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/user">查看用户</router-link> <router-link to="/login">登录</router-link> <router-view></router-view> </div> <script> // 定义路由跟组件的匹配规则 let url = [ { path: "/", component:{ template:`<div> <h1>这是首页组件</h1> <button @click="my_click">点击跳转到登录页面</button> </div>`, methods: { my_click: function () { // 跳转到登录页面 跳转到登录组件 console.log(this.$route); console.log(this.$router); console.log(this.$el); console.log(this.$data); // $route路由的所有信息 // $router VueRouter实例化对象 this.$router.push("/login") } } } }, { path: "/course", name:'course', component:{ template:`<div><h1>这是课程组件</h1></div>` } }, { path: "/user", meta:{ //元信息配置 required_login:true }, name:'user', component:{ template:`<div><h1>这是用户组件</h1></div>` } }, { path: "/login", name: 'login', component:{ template:`<div><h1>这是登录组件</h1></div>` } }, ]; //规则对象,路由跟组件的匹配规则 //实例化VueRouter( let routers = new VueRouter({ routes:url, mode:'history' }); routers.beforeEach(function (to,from,next) { //钩子函数(Vue路由的实例方法),用于校验访问状态，一般用于重定向或取消访问 console.log(to); //要访问的目标path，对象{。。} console.log(from); //当前的path，对象{。。} console.log(next);// 下一步的动作 // if (to.path == "/user"){ // next("/login") // } if (to.meta.required_login){ next("login") // 重定向+反向解析 } next(); //必须写,如果没有传值，则继续访问to。不写，或者next(false)路由down，中止访问 }); routers.afterEach(function (to,from) { //只用于获取你从哪里来的路由信息 }); // 把VueRouter的实例化对象注册到Vue的根实例里 const app = new Vue({ el: "#app", data: {}, router: routers // 注册 }) </script> </body>
5.子路由的注册
<body> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/course/detail">课程详情</router-link> <router-view></router-view> </div> <script> // 定义路由跟组件的匹配规则 let url = [ //规则对象,路由跟组件的匹配规则 { path: "/", component:{ template:`<div><h1>这是首页组件</h1></div>` } }, { path: "/course", component:{ template:`<div><h1>这是课程组件</h1></div>` } }, { path: "/course/detail", redirect:{name:'brief'}, component:{ template:`<div> <h1>这是课程详情组件</h1> <hr> <router-link :to="{name:'brief'}">课程概述</router-link> <router-link to="/course/detail/chapter">课程章节</router-link> <router-view></router-view> </div>` }, children:[ { // path: "/course/detail/brief", path: "brief", //路由拼接 name:"brief", //反向解析 component:{ template:`<div><h1>这是课程概述组件</h1></div>` }, }, { // path: "/course/detail/chapter", path: "chapter",//不使用反向解析的话，则与父路由url拼接 // name:"chapter", component:{ template:`<div><h1>这是课程章节组件</h1></div>` }, } ] } ]; //实例化VueRouter( let routers = new VueRouter({ routes:url }); const app = new Vue({ el: "#app", data: {}, router: routers }) </script> </body>
6.命名的路由视图
<style> .myfooter { position: fixed; bottom: 0; } </style> </head> <body> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/user">用户</router-link> <!--加样式类可以分区域展示,可以分别绑定不同的样式类--> <router-view name="head" class="myheader"></router-view> <router-view name="foot" class="myfooter"></router-view> <router-view></router-view> <!--锚点--> </div> <script> // 定义路由跟组件的匹配规则 let url = [ { path: "/", component:{ template:`<div><h1>这是首页组件</h1></div>` } }, { path: "/course", component:{ template:`<div><h1>这是课程组件</h1></div>` } }, { path: "/user", components:{ head:{ //自定义命名的视图 template:`<div><h1>这是用户头部组件</h1></div>` }, foot:{ //自定义命名的视图 template:`<div><h1>这是用户底部组件</h1></div>` }, } } ]; //规则对象,路由跟组件的匹配规则 //实例化VueRouter( let routers = new VueRouter({ routes:url, mode:"history" }); const app = new Vue({ el: "#app", data: {}, router: routers }) </script> </body>
二，Vue的生命周期
<body> <div id="app"> <p>{{name}}</p> </div> <script> const app = new Vue({ el: "#app", data: { name: "alex" }, methods: { init: function (){ console.log(123) } }, beforeCreate() { console.group("BeforeCreate"); //创建实例之前 console.log(this.$el); // undefined console.log(this.name); // undefined console.log(this.init); }, created(){ console.group("created"); //创建实例完成 console.log(this.$el); // undefined 必须指定根实例的作用域，否则阻塞在此生命周期 console.log(this.name); // 已被初始化 console.log(this.init); // 已被初始化 }, beforeMount(){ //挂载前的状态是虚拟DOM技术，先把坑站住了~挂载之后才真正的把值渲染进去 console.group("beforeMount"); //挂载前状态 console.log(this.$el); // 已被初始化 console.log(this.name); // 已被初始化 console.log(this.init); // 已被初始化 }, mounted(){ console.group("mounted"); //挂载结束状态 console.log(this.$el); // 已被初始化 console.log(this.name); // 已被初始化 console.log(this.init); // 已被初始化 }, beforeUpdate(){ //当更新data时，就触发这个update函数 console.group("beforeUpdate"); console.log(this.$el); console.log(this.name); //数据已改变，所有编译和渲染的都是那个的数据 console.log(this.init); }, updated(){ console.group("updated"); console.log(this.$el); console.log(this.name); console.log(this.init); }, // 在浏览器console里执行命令：app.$destroy(); //触发了destroy相关的钩子函数，也就是说组件被销毁 // 更改data中的数据~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了 beforeDestory(){ console.group("beforeDestoryed"); console.log(this.$el); console.log(this.name); console.log(this.init); }, destory(){ console.group("destory"); console.log(this.$el); console.log(this.name); console.log(this.init); }, }) </script> </body>