一、vue-router路由

1、介绍

vue-router是Vue的路由系统，用于定位资源的，在页面不刷新的情况下切换页面内容。
类似于a标签，实际上在页面上展示出来的也是a标签，是锚点。
router需要相应的js文件，可到官网下载或者使用CDN: https://unpkg.com/vue-router/dist/vue-router.js
使用Vue需要引入相应的JS文件，可到官网下载或者直接使用CDN：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js

2、路由注册

1. 定义一个路由匹配规则和路由对应组件的对象

  1. let url = [
  2.     {
  3.         path: "/",  // 路由
  4.         component: {  // 组件：component单数时，代表这个组件就是这个url的唯一组件，因此不需要写组件名
  5.         }
  6.     }
  7. ]

2. 实例化VueRouter对象 并把匹配规则注册进去

  1. let my_router = new VueRouter({
  2.     routes: url,
  3.     // 路由去掉#
  4.     mode: 'history'
  5. })

3. 把VueRouter实例化对象注册Vue的根实例

  1. const app = new Vue({
  2.     el: "#app",
  3.     router: my_router
  4. })

4. router-link
　　把匹配规则转成a标签

5. router-view
　　路由的组件显示的区域

6. demo

  1. <body>
  2. <div id="app">
  3.     <router-link to="/">首页</router-link>
  4.     <router-link to="/class">班级</router-link>
  5.     <router-view></router-view>
  6. </div>
  7.  
  8. <script>
  9.     // 定义路由匹配规则和路由对应的组件对象
  10.     let url = [
  11.         {
  12.             path: "/",
  13.             component: {// component单数时，代表这个组件就是这个url的唯一组件，因此不需要写组件名,直接写配置信息即可
  14.                 template: `<div><h1>你好！这是首页</h1></div>`
  15.             }
  16.         },
  17.         {
  18.             path: "/class",
  19.             component: {
  20.                 template: `<div><h1>这是班级信息</h1></div>`
  21.             }
  22.         }
  23.     ];
  24.  
  25.     // 实例化VueRouter对象，并把url注册进去
  26.     let my_router = new VueRouter({
  27.         routes: url,
  28.         // 路由去掉#
  29.         mode: 'history'
  30.     });
  31.  
  32.     // 把VueRouter实例对象注册到Vue的根实例里
  33.     const app = new Vue({
  34.         el: "#app",
  35.         router: my_router
  36.     })
  37.  
  38. </script>
  39. </body>

3、命名路由及参数

1. 注意：要使用命名路由，那么命名路由的router-link里to一定要v-bind，可以简写 :to
2. Vue的路由中，路由命名相当于python的路由别名，用name命名
3. 如果路由中需要在路由中加参数，则使用params
4. 如果在路由后面添加?搜索参数，则使用query
5. 要使用这些参数，则用this.$route，route是路由的所有信息
6. $route的参数
　　fullPath: "/student/ming?age=38" # 包含？参数的路径
　　hash: ""
　　matched: [{…}] # 路由匹配的正则
　　meta: {} # 元信息
　　name: "student" # 路由别名
　　params: {sname: "ming"} # 路由参数
　　path: "/student/ming" # 不含？参数的路径
　　query: {age: 38} # ？参数
　　__proto__: Object

7. demo

  1. <body>
  2. <div id="app">
  3.     <router-link v-bind:to="{name: 'home'}">首页</router-link>
  4.  
  5.     <router-link to="/class?class_id=1">班级</router-link>
  6.     <!--<router-link :to="{name: 'class', query: {class_id: 1}}">班级</router-link>-->
  7.  
  8.     <!--<router-link to="/student/ming?age=38">用户</router-link>-->
  9.     <router-link :to="{name: 'student', params: {sname: 'ming'}, query: {age: 38}}">学生</router-link>
  10.     <router-view></router-view>
  11. </div>
  12.  
  13. <script>
  14.     let url = [
  15.         {
  16.             path: '/',
  17.             name: 'home',
  18.             component: {
  19.                 template: `<div><h1>你好！这是首页</h1></div>`
  20.             }
  21.         },
  22.         {
  23.             path: '/class',
  24.             name: 'class',
  25.             component: {
  26.                 template: `<div><h1>这是{{this.$route.query.class_id}}班</h1></div>`
  27.             }
  28.         },
  29.         {   // 在路由中添加参数使用  :name
  30.             path: '/student/:sname',
  31.             name: 'student',
  32.             component: {
  33.                 template: `<div>
  34.                         <h1>这是{{this.$route.params.sname}}年龄是{{this.$route.query.age}}</h1>
  35.                         </div>`,
  36.                 mounted(){
  37.                     console.log(this.$route)
  38.                 }
  39.             }
  40.  
  41.         }
  42.     ];
  43.  
  44.     // 实例化VueRouter对象
  45.     let my_router = new VueRouter({
  46.         routes: url,
  47.         mode: 'history'
  48.     });
  49.  
  50.     // 把VueRouter实例注册到Vue根实例
  51.     const app = new Vue({
  52.         el: "#app",
  53.         router: my_router,
  54.     })
  55.  
  56. </script>
  57. </body>

4、手动路由

1. 注意：$route是路由的所有信息，而$router是VueRouter实例化对象
2. $router.push 把这个router对象跳转到哪里
3. 手动路由的两种写法
this.$router.push("/login")
this.$router.push({name:'login', params:{},query: {}})

4. demo

  1. <body>
  2. <div id="app">
  3.     <router-link to="/">首页</router-link>
  4.     <router-link to="/class">班级</router-link>
  5.     <router-link :to="{name:'login'}">登录</router-link>
  6.     <router-view></router-view>
  7. </div>
  8.  
  9. <script>
  10.     // 定义路由匹配规则和路由对应的组件对象
  11.     let url = [
  12.         {
  13.             path: "/",
  14.             component: {
  15.                 template: `<div>
  16.                         <h1>你好！这是首页</h1>
  17.                         <button v-on:click="my_click">点击跳转到登录页面</button>
  18.                         </div>`,
  19.                 methods: {
  20.                     my_click: function () {
  21.                         // $route 路由的所有信息
  22.                         // $router VueRouter实例化对象
  23.                         console.log(this.$route);
  24.                         console.log(this.$router);
  25.                         // push跳转到登录页面
  26.                         // this.$router.push("/login")
  27.                         this.$router.push({name: "login"})
  28.                     }
  29.                 }
  30.             }
  31.         },
  32.         {
  33.             path: "/class",
  34.             component: {
  35.                 template: `<div><h1>这是班级信息</h1></div>`
  36.             }
  37.         },
  38.         {
  39.             path: "/login",
  40.             name: "login",
  41.             component: {
  42.                 template: `<div><h1>这是登录页面</h1></div>`
  43.             }
  44.         }
  45.     ];
  46.  
  47.     // 实例化VueRouter对象，并把url注册进去
  48.     let my_router = new VueRouter({
  49.         routes: url,
  50.         // 路由去掉#
  51.         mode: 'history'
  52.     });
  53.  
  54.     // 把VueRouter实例对象注册到Vue的根实例里
  55.     const app = new Vue({
  56.         el: "#app",
  57.         router: my_router
  58.     })
  59.  
  60. </script>
  61. </body>

5、路由的钩子函数

1. 路由钩子函数：一个路由跳转到另一个路由(还没到)的过程中触发 beforeEach(function (to, from, next) {})
2. 路由钩子函数：一个路由已经跳转到了另一个路由后触发 afterEach(function (to, from) {})
3. 参数： 
　　to 你要去哪里
　　from 你从哪里来
　　next 你接下来要做什么
4. next的参数详解
　　next(function) 一定要调用这个方法来resolve这个钩子函数。执行效果依赖next方法的调用参数
　　next() 什么都不做继续执行到调转的路由
　　next(false) 中断当前导航 没有跳转 也没有反应
　　next("/") 参数是路径 调转到该路径
　　next(error) 如果next参数是一个Error实例 导航终止该错误，会传递给router.onError()注册过的回调中

5. demo

  1. <body>
  2. <div id="app">
  3.     <router-link to="/">首页</router-link>
  4.     <router-link :to="{name: 'class', query: {class_id: 1}}">班级</router-link>
  5.     <router-link :to="{name: 'user'}">用户</router-link>
  6.     <router-link to="/login">登录</router-link>
  7.     <router-view></router-view>
  8. </div>
  9.  
  10. <script>
  11.     let url = [
  12.         {
  13.             path: '/',
  14.             component: {
  15.                 template: `<div>
  16.                         <h1>你好！这是首页</h1>
  17.                         <button @click="my_click">点击跳转到登录页面</button>
  18.                         </div>`,
  19.                 methods: {
  20.                     my_click: function () {
  21.                         this.$router.push("/login")
  22.                     }
  23.                 }
  24.             }
  25.         },
  26.         {
  27.             path: '/class',
  28.             name: 'class',
  29.             component: {
  30.                 template: `<div><h1>这是{{this.$route.query.class_id}}班的信息</h1></div>`
  31.             }
  32.         },
  33.         {
  34.             path: '/login',
  35.             name: 'login',
  36.             component: {
  37.                 template: `<div>
  38.                         <h1>这是登录页面</h1>
  39.                         </div>`
  40.             }
  41.         },
  42.         {
  43.             path: '/user',
  44.             name: 'user',
  45.             meta: {
  46.                 // 设置元信息
  47.                 required_login: true
  48.             },
  49.             component: {
  50.                 template: `<div><h1>这是用户组件</h1></div>`
  51.             }
  52.         }
  53.     ];
  54.  
  55.     // 实例化VueRouter对象
  56.     let my_router = new VueRouter({
  57.         routes: url,
  58.         mode: 'history'
  59.     });
  60.  
  61.     // 路由my_router的钩子函数：一个路由跳转到另一个路由(还没到)的过程中触发
  62.     my_router.beforeEach(function (to, from, next) {
  63.         console.log(to);  // 你要去哪里
  64.         console.log(from);  // 你从哪里来
  65.         console.log(next);  // 你接下来要做什么
  66.         if(to.meta.required_login){
  67.             next('/login')
  68.         }else{
  69.             next();
  70.         }
  71.     });
  72.  
  73.     // 路由my_router的钩子函数：一个路由已经跳转到了另一个路由后触发
  74.     my_router.afterEach(function (to, from) {
  75.        // 一般只用于获取你从哪里来的路由信息
  76.         console.log(to);  // 你要去哪里
  77.         console.log(from);  // 你从哪里来
  78.     });
  79.  
  80.     // 把VueRouter实例注册到Vue根实例
  81.     const app = new Vue({
  82.         el: "#app",
  83.         router: my_router,
  84.     })
  85.  
  86. </script>
  87. </body>

6、子路由的注册

1. 在父路由里注册children: [{},{}]
2. 在父路由对应的组件里的template里写router-link router-view
3. redirect:重定向到某个页面
4. 子路由的path不写"/"前缀，则会自动跟父级路由拼接
5. 如果写了"/"前缀，那么path就是你写的路径
6. 点击子路由连接，会触发其父路由，子路由的template只会显示在父路由的template里面
7. 子路由可以直接在Vue作用域使用，但还是会触发它的父路由的template

8. demo

  1. <body>
  2. <div id="app">
  3.     <router-link to="/">首页</router-link>
  4.     <router-link to="/class">班级</router-link>
  5.     <router-link to="/class/info">班级信息</router-link>
  6.     <router-link :to="{name: 'grade'}">年级</router-link>
  7.     <router-view></router-view>
  8. </div>
  9.  
  10. <script>
  11.     let url = [
  12.         {
  13.             path: '/',
  14.             component: {
  15.                 template: `<div><h1>你好！这是首页</h1></div>`
  16.             }
  17.         },
  18.         {
  19.             path: '/class',
  20.             component: {
  21.                 template: `<div><h1>这是班级</h1></div>`
  22.             }
  23.         },
  24.         {
  25.             path: '/class/info',
  26.             // 路由重定向redirect，进入/class/info，就会重定向到/class/info/grade
  27.             // redirect: {name: 'grade'},
  28.             component: {
  29.                 template: `<div>
  30.                         <h1>这是班级详细信息</h1>
  31.                         <hr>
  32.                         <router-link :to="{name: 'grade'}">所在年级</router-link>
  33.                         <router-link to="/class/class_id">所在班级</router-link>
  34.                         <router-view></router-view>
  35.                         </div>`,
  36.             },
  37.             children: [
  38.                 {
  39.                     // 没写前缀会直接拼接在父级路由后 path: /class/info/grade
  40.                     path: "grade",
  41.                     // 路由别名
  42.                     name: 'grade',
  43.                     component: {
  44.                         template: `<div><h2>一年级</h2></div>`
  45.                     }
  46.                 },
  47.                 {
  48.                     // 自己直接写路由，不会拼接在父级路由后
  49.                     path: "/class/class_id",
  50.                     component: {
  51.                         template: `<div><h2>3班</h2></div>`
  52.                     }
  53.                 }
  54.             ],
  55.         },
  56.     ];
  57.  
  58.     // 实例化VueRouter对象
  59.     let my_router = new VueRouter({
  60.         routes: url,
  61.         mode: 'history'
  62.     });
  63.  
  64.     // 把VueRouter实例注册到Vue根实例
  65.     const app = new Vue({
  66.         el: "#app",
  67.         router: my_router,
  68.     })
  69.  
  70. </script>
  71. </body>

7、命名路由视图

1. 当我们只有一个<router-view></router-view>的时候，所有内容都展示在这一个面板里面。
如果是content和footer需要同时显示在不同区域，这就需要对视图进行命名。
2. 路由中使用components(是复数),{组件名1: 配置信息1, 组件名2: 配置信息2}
3. 在HTML视图中使用<router-view name="header"></router-view>区分不同的组件
4.也就是说路由的组件：

component(单数)用<router-view></router-view>标签
components(复数)用<router-view name="组件名"></router-view>标签

5. demo

  1. <body>
  2. <div id="app">
  3.     <router-link to="/">首页</router-link>
  4.  
  5.     <router-link to="/class">班级</router-link>
  6.     <router-link to="/class/info">班级信息</router-link>
  7.     <router-view name="header"></router-view>
  8.     <router-view name="footer" style="position: fixed;bottom: 0"></router-view>
  9.     <router-view></router-view>
  10. </div>
  11.  
  12. <script>
  13.     let url = [
  14.         {
  15.             path: '/',
  16.             component: {
  17.                 template: `<div><h1>你好！这是首页</h1></div>`
  18.             }
  19.         },
  20.         {
  21.             path: '/class',
  22.             component: {
  23.                 template: `<div><h1>这是班级</h1></div>`
  24.             }
  25.         },
  26.         {
  27.             path: '/class/info',
  28.             // components 复数 有多个组件，要写组件名
  29.             components: {
  30.                 header: {
  31.                     template: `<div><h1>这是班级头</h1></div>`
  32.                 },
  33.                 footer: {
  34.                     template: `<div><h1>这是班级尾</h1></div>`
  35.                 }
  36.             },
  37.         },
  38.     ];
  39.  
  40.     // 实例化VueRouter对象
  41.     let my_router = new VueRouter({
  42.         routes: url,
  43.         mode: 'history'
  44.     });
  45.  
  46.     // 把VueRouter实例注册到Vue根实例
  47.     const app = new Vue({
  48.         el: "#app",
  49.         router: my_router,
  50.     })
  51.  
  52. </script>
  53. </body>

二、Vue的生命周期及其钩子函数

1、图示

对比

2、demo

beforeCreate         啥也没有
created                 有数据和事件(方法)、无el

beforeMount         形成虚拟Dom，有el、数据和事件(方法)
mounted               渲染页面了，有el、数据和事件(方法)

beforeUpdate       数据改变前触发
updated                数据改变后触发

beforeDestroy     vue实例销毁前触发
destroyed            vue实例销毁时触发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  7.  
  8. </head>
  9. <body>
  10. <div id="app">
  11.     {{name}}
  12.     <button @click="my_update">点击触发update</button>
  13.     <button @click="my_destroy">点击触发destroy</button>
  14. </div>
  15. <script>
  16.     const app = new Vue({
  17.         el: "#app",
  18.         data: {
  19.             name: "明哥"
  20.         },
  21.         methods: {
  22.             init: function () {
  23.                 console.log(123)
  24.             },
  25.             my_update: function () {
  26.                 this.name = "狗子"
  27.             },
  28.             my_destroy: function () {
  29.                 app.$destroy()
  30.             }
  31.         },
  32.         beforeCreate(){
  33.             console.group("BeforeCreate");
  34.             console.log(this.$el);
  35.             console.log(this.name);
  36.             console.log(this.init);
  37.         },
  38.         created(){
  39.             console.group("Create");
  40.             console.log(this.$el);
  41.             console.log(this.name);
  42.             console.log(this.init);
  43.         },
  44.         beforeMount(){
  45.             console.group("BeforeMount");
  46.             console.log(this.$el);
  47.             console.log(this.name);
  48.             console.log(this.init);
  49.         },
  50.         mounted(){
  51.             console.group("mounted");
  52.             console.log(this.$el);
  53.             console.log(this.name);
  54.             console.log(this.init);
  55.         },
  56.         beforeUpdate(){
  57.             console.group("BeforeUpdate");
  58.             console.log(this.$el);
  59.             console.log(this.name);
  60.             console.log(this.init);
  61.         },
  62.         updated(){
  63.             console.group("updated");
  64.             console.log(this.$el);
  65.             console.log(this.name);
  66.             console.log(this.init);
  67.         },
  68.         beforeDestroy(){
  69.             console.group("BeforeDestroy");
  70.             console.log(this.$el);
  71.             console.log(this.name);
  72.             console.log(this.init);
  73.         },
  74.         destroyed(){
  75.             console.group("Destroy");
  76.             console.log(this.$el);
  77.             console.log(this.name);
  78.             console.log(this.init);
  79.         }
  80.     })
  81. </script>
  82.  
  83. </body>
  84. </html>

3、create 和 mounted 相关

执行上面代码，可以看到：
　　beforecreated ：el 和 data 并未初始化
　　created：完成了data数据的初始化 el 没有
　　beforeMount：完成了el 和 data的初始化
　　mounted：完成了挂载
　　也就是说，挂载前的状态是虚拟DOM技术，先把坑站住了，挂载之后才真正的把值渲染进去

4、update 相关

　　我们修改了app的data的某个值时，
　　我们就触发了update相关的钩子函数，也就是说data里的值被修改会触发update的操作

5、destroy 相关

　　我们在浏览器console里执行命令：
　　app.$destroy();
　　触发了destroy相关的钩子函数，也就是说组件被销毁
　　更改message的值，DOM中的值不变，也就是说DOM元素依然存在只是不受vue控制了

VueRouter和Vue生命周期(钩子函数)的更多相关文章

  1. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  2. 关于 vue 生命周期 钩子函数 事件

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...

  3. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  4. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  5. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

  6. vue生命周期钩子函数详解

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...

  7. Vue生命周期钩子函数加载顺序的理解

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  8. vue生命周期钩子函数

    <template> <div> <h2>this is from C.vue</h2> </div> </template> ...

  9. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

随机推荐

  1. oracle nvl,nvl2,coalesce几个函数的区别

    1.nvl(exp1,exp2)该函数是处理表达式中的空值: 假设表达式exp1是空值,则该函数返回表达式exp2的值, 假设表达式exp1没有是空值,则该函数返回表达式exp1的值. 2.nvl2( ...

  2. 解决No 'Access-Control-Allow-Origin' header is present on the requested resource.跨域问题（后台(java)解决方法）

    附:前端常见跨域解决方案(全) 跨域错误 解决方法 在后台写一个过滤器来改写请求头 附上一个前端不知所以然的后台java代码: public class CorsFilter implements F ...

  3. PHP技能树

  4. selenium-历史(一)

    简介 Selenium是ThoughtWorks公司研发的一个强大的基于浏览器的开源自动化测试工具,它通常用来编写web应用的自动化测试.早期也即Selenium1.x时期主要使用Selenium R ...

  5. c/c++ 网络编程 getaddrinfo 函数

    网络编程 getaddrinfo 函数 解析网址,返回IP地址. 例子: #include <iostream> #include <string.h> #include &l ...

  6. iOS UITextField 响应键盘的return 事件

    UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(, , , )] textField.returnKeyT ...

  7. AnyDesk远程连接及异常处理

    远程协助工具,用得最普遍的非QQ莫属,毕竟用户量在这里摆着的.不过,用户体验效果还不太理想,你懂得.接下来分享两个工具,一个是TeamViewer,另一个是AnyDesk.你更倾向于哪一款呢? 一.T ...

  8. equals方法相关总结

    先说一下Object类吧: 这是一个号称为祖宗类的东西,是所有类的父类,也是唯一一个没有父类的类. 接口不继承object类 并且Object类存在于java的lang包中,我们都知道存在于lang包 ...

  9. excel poi导出demo

    最近做了一个excel 导出的demo,是抄写老大的(嘻嘻嘻),现在把demo源码放在这里 链接:https://pan.baidu.com/s/1_xj0hej-1xwX5JF39acEOg 提取码 ...

  10. EF Core 多对多配置

    1.配置2个数据表 T_Authors ,T_Books 2.新建控制台项目,安装EF驱动 PM> Install-Package Pomelo.EntityFrameworkCore.Mysq ...