VueRouter和Vue生命周期(钩子函数)

一、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/[email protected]/dist/vue.js

2、路由注册

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

let url = [
    {
        path: "/",  // 路由
        component: {  // 组件:component单数时,代表这个组件就是这个url的唯一组件,因此不需要写组件名
        }
    }
]

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

let my_router = new VueRouter({
    routes: url,
    // 路由去掉#
    mode: ‘history‘
})

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

const app = new Vue({
    el: "#app",
    router: my_router
})

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

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

6. demo

<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/class">班级</router-link>
    <router-view></router-view>
</div>

<script>
    // 定义路由匹配规则和路由对应的组件对象
    let url = [
        {
            path: "/",
            component: {// component单数时,代表这个组件就是这个url的唯一组件,因此不需要写组件名,直接写配置信息即可
                template: `<div><h1>你好!这是首页</h1></div>`
            }
        },
        {
            path: "/class",
            component: {
                template: `<div><h1>这是班级信息</h1></div>`
            }
        }
    ];

    // 实例化VueRouter对象,并把url注册进去
    let my_router = new VueRouter({
        routes: url,
        // 路由去掉#
        mode: ‘history‘
    });

    // 把VueRouter实例对象注册到Vue的根实例里
    const app = new Vue({
        el: "#app",
        router: my_router
    })

</script>
</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

<body>
<div id="app">
    <router-link v-bind:to="{name: ‘home‘}">首页</router-link>

    <router-link to="/class?class_id=1">班级</router-link>
    <!--<router-link :to="{name: ‘class‘, query: {class_id: 1}}">班级</router-link>-->

    <!--<router-link to="/student/ming?age=38">用户</router-link>-->
    <router-link :to="{name: ‘student‘, params: {sname: ‘ming‘}, query: {age: 38}}">学生</router-link>
    <router-view></router-view>
</div>

<script>
    let url = [
        {
            path: ‘/‘,
            name: ‘home‘,
            component: {
                template: `<div><h1>你好!这是首页</h1></div>`
            }
        },
        {
            path: ‘/class‘,
            name: ‘class‘,
            component: {
                template: `<div><h1>这是{{this.$route.query.class_id}}班</h1></div>`
            }
        },
        {   // 在路由中添加参数使用  :name
            path: ‘/student/:sname‘,
            name: ‘student‘,
            component: {
                template: `<div>
                        <h1>这是{{this.$route.params.sname}}年龄是{{this.$route.query.age}}</h1>
                        </div>`,
                mounted(){
                    console.log(this.$route)
                }
            }

        }
    ];

    // 实例化VueRouter对象
    let my_router = new VueRouter({
        routes: url,
        mode: ‘history‘
    });

    // 把VueRouter实例注册到Vue根实例
    const app = new Vue({
        el: "#app",
        router: my_router,
    })

</script>
</body>

4、手动路由

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

4. demo

<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/class">班级</router-link>
    <router-link :to="{name:‘login‘}">登录</router-link>
    <router-view></router-view>
</div>

<script>
    // 定义路由匹配规则和路由对应的组件对象
    let url = [
        {
            path: "/",
            component: {
                template: `<div>
                        <h1>你好!这是首页</h1>
                        <button v-on:click="my_click">点击跳转到登录页面</button>
                        </div>`,
                methods: {
                    my_click: function () {
                        // $route 路由的所有信息
                        // $router VueRouter实例化对象
                        console.log(this.$route);
                        console.log(this.$router);
                        // push跳转到登录页面
                        // this.$router.push("/login")
                        this.$router.push({name: "login"})
                    }
                }
            }
        },
        {
            path: "/class",
            component: {
                template: `<div><h1>这是班级信息</h1></div>`
            }
        },
        {
            path: "/login",
            name: "login",
            component: {
                template: `<div><h1>这是登录页面</h1></div>`
            }
        }
    ];

    // 实例化VueRouter对象,并把url注册进去
    let my_router = new VueRouter({
        routes: url,
        // 路由去掉#
        mode: ‘history‘
    });

    // 把VueRouter实例对象注册到Vue的根实例里
    const app = new Vue({
        el: "#app",
        router: my_router
    })

</script>
</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

<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link :to="{name: ‘class‘, query: {class_id: 1}}">班级</router-link>
    <router-link :to="{name: ‘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 () {
                        this.$router.push("/login")
                    }
                }
            }
        },
        {
            path: ‘/class‘,
            name: ‘class‘,
            component: {
                template: `<div><h1>这是{{this.$route.query.class_id}}班的信息</h1></div>`
            }
        },
        {
            path: ‘/login‘,
            name: ‘login‘,
            component: {
                template: `<div>
                        <h1>这是登录页面</h1>
                        </div>`
            }
        },
        {
            path: ‘/user‘,
            name: ‘user‘,
            meta: {
                // 设置元信息
                required_login: true
            },
            component: {
                template: `<div><h1>这是用户组件</h1></div>`
            }
        }
    ];

    // 实例化VueRouter对象
    let my_router = new VueRouter({
        routes: url,
        mode: ‘history‘
    });

    // 路由my_router的钩子函数:一个路由跳转到另一个路由(还没到)的过程中触发
    my_router.beforeEach(function (to, from, next) {
        console.log(to);  // 你要去哪里
        console.log(from);  // 你从哪里来
        console.log(next);  // 你接下来要做什么
        if(to.meta.required_login){
            next(‘/login‘)
        }else{
            next();
        }
    });

    // 路由my_router的钩子函数:一个路由已经跳转到了另一个路由后触发
    my_router.afterEach(function (to, from) {
       // 一般只用于获取你从哪里来的路由信息
        console.log(to);  // 你要去哪里
        console.log(from);  // 你从哪里来
    });

    // 把VueRouter实例注册到Vue根实例
    const app = new Vue({
        el: "#app",
        router: my_router,
    })

</script>
</body>

6、子路由的注册

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

8. demo

<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/class">班级</router-link>
    <router-link to="/class/info">班级信息</router-link>
    <router-link :to="{name: ‘grade‘}">年级</router-link>
    <router-view></router-view>
</div>

<script>
    let url = [
        {
            path: ‘/‘,
            component: {
                template: `<div><h1>你好!这是首页</h1></div>`
            }
        },
        {
            path: ‘/class‘,
            component: {
                template: `<div><h1>这是班级</h1></div>`
            }
        },
        {
            path: ‘/class/info‘,
            // 路由重定向redirect,进入/class/info,就会重定向到/class/info/grade
            // redirect: {name: ‘grade‘},
            component: {
                template: `<div>
                        <h1>这是班级详细信息</h1>
                        <hr>
                        <router-link :to="{name: ‘grade‘}">所在年级</router-link>
                        <router-link to="/class/class_id">所在班级</router-link>
                        <router-view></router-view>
                        </div>`,
            },
            children: [
                {
                    // 没写前缀会直接拼接在父级路由后 path: /class/info/grade
                    path: "grade",
                    // 路由别名
                    name: ‘grade‘,
                    component: {
                        template: `<div><h2>一年级</h2></div>`
                    }
                },
                {
                    // 自己直接写路由,不会拼接在父级路由后
                    path: "/class/class_id",
                    component: {
                        template: `<div><h2>3班</h2></div>`
                    }
                }
            ],
        },
    ];

    // 实例化VueRouter对象
    let my_router = new VueRouter({
        routes: url,
        mode: ‘history‘
    });

    // 把VueRouter实例注册到Vue根实例
    const app = new Vue({
        el: "#app",
        router: my_router,
    })

</script>
</body>

7、命名路由视图

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

4. demo

<body>
<div id="app">
    <router-link to="/">首页</router-link>

    <router-link to="/class">班级</router-link>
    <router-link to="/class/info">班级信息</router-link>
    <router-view name="header"></router-view>
    <router-view name="footer" style="position: fixed;bottom: 0"></router-view>
    <router-view></router-view>
</div>

<script>
    let url = [
        {
            path: ‘/‘,
            component: {
                template: `<div><h1>你好!这是首页</h1></div>`
            }
        },
        {
            path: ‘/class‘,
            component: {
                template: `<div><h1>这是班级</h1></div>`
            }
        },
        {
            path: ‘/class/info‘,
            // components 复数 有多个组件,要写组件名
            components: {
                header: {
                    template: `<div><h1>这是班级头</h1></div>`
                },
                footer: {
                    template: `<div><h1>这是班级尾</h1></div>`
                }
            },
        },
    ];

    // 实例化VueRouter对象
    let my_router = new VueRouter({
        routes: url,
        mode: ‘history‘
    });

    // 把VueRouter实例注册到Vue根实例
    const app = new Vue({
        el: "#app",
        router: my_router,
    })

</script>
</body>

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

1、图示

对比

2、demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

</head>
<body>
<div id="app">
    {{name}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "明哥"
        },
        methods: {
            init: function () {
                console.log(123)
            }
        },
        beforeCreate(){
            console.group("BeforeCreate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        created(){
            console.group("Create");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeMount(){
            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(){
            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);
        },
        beforeDestroy(){
            console.group("BeforeDestroy");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        destroyed(){
            console.group("Destroy");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        }
    })
</script>

</body>
</html>

3、create 和 mounted 相关

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

4、update 相关

  我们在浏览器console里执行命令:
  app.message = "girl"
  我们就触发了update相关的钩子函数,也就是说data里的值被修改会出发update的操作

5、destroy 相关

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

原文地址:https://www.cnblogs.com/yidashi110/p/10091813.html

时间: 2024-10-06 16:01:57

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

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

对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos()).这是因为箭头函数绑定了父上下文,因此this与你期待的 Vue 实例不同,this.fetchTodos的行为未定义. 下面附加

vue生命周期钩子函数

转载自:https://segmentfault.com/a/1190000008879966 vue生命周期探究(一) 前言 在使用vue开发的过程中,我们经常会接触到生命周期的问题.那么你知道,一个标准的工程项目中,会有多少个生命周期勾子吗?让我们来一起来盘点一下: 根组件实例:8个 (beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destroyed) 组件实例:8个 (beforeCr

Vue生命周期/钩子函数的理解

对于实现页面逻辑交互等效果,我们必须弄懂vue的生命周期,知道我们写的东西应该挂载到哪里.vue官方api给了简单的逻辑,如下: 所有的生命周期钩子自动绑定this上,因此你可以访问数据,属性和方法进行运算,所以要特别注意的是不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos()). 下面附加一张生命周期图示 <!DOCTYPE html> <html> <head> <title></tit

Vue 生命周期钩子函数

Vue生命周期 每个vue实例在被创建时都需要经过一系列初始化过程. 如设置数据监听.编译模板.将实例挂载到DOM.在数据变化时更新DOM等. 同时在这个过程中也会运行一些角坐生命周期钩子的函数,这给了用户在不同阶段添加自己代码的机会. 2.6.1版本有8个生命周期 beforeCreate created beforeCreate 在实例创建之前执行,此时data数据访问不到,不能通过this修改data属性 created 在实例创建完执行,此时可以拿到data数据,可以通过this修改da

vue生命周期钩子函数解读步骤

vue 生命周期: 一个组件从创建到销毁的过程 let vm = new Vue({ el : "id", data : { }, 1. beforeCreate(){ 1. 当vue实例化的时候会做一个初始化的操作,在这个生命周期函数里面我们可以做初始化的loading 2. 在当前函数中访问不到data中的属性,但是可以通过Vue的实例进行访问 vm."属性" console.log(beforeCreate) } 2. created(){ 1. 当befor

react中的生命周期钩子函数? 每个都是干什么用的?

首先react有10个生命周期钩子函数 挂载期constructor 数据接收 实现继承super(props)componentWillMount 数据挂载之前 可以操作数据 不可以操作domcomponentDidMount 数据挂载之后 可以操作数据和domrender 渲染组件 和 html 标签 更新期shouldComponentUpdate 检测组件内的变化 可以用作页面性能的优化(默认值为true)componentReceiveProps 接收组件传入输入数据component

vue实例的生命周期 —— 钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会. vue有8种生命周期函数: 钩子函数 触发的行为  在此阶段可以做的事情 beforeCreadted 在实例创建以前调用,没有实例化,数据访问不到 vue实例的挂载元素$el和数据对象data都为undefined,还未初始化.   加loading事件

vue 生命周期钩子

每个vue实例被创建时都会经历一系列初始化的过程,像是一个生命从无到有的过程,所以叫生命周期,而这个过程都有对应的不同阶段,也就对应了生命周期不同的钩子函数,这些生命周期函数,作为vue实例的属性使用,只有到了这一过程的时候,对应的函数才会被调用,总结下来有如下方法: beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用: created:在实例创建完成后被立即调用.在这一步,实例已完成以下的配置:数据观测 (d

Vue生命周期钩子---2

vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执行. ps:下面代码可以直接复制出去执行 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="http