vue教程——07 Vue生命周期和路由

最新推荐文章于 2024-06-16 18:31:13 发布

Dormiveglia-flx

最新推荐文章于 2024-06-16 18:31:13 发布

阅读量1.5k

点赞数 1

分类专栏： Vue教程文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sugerfle/article/details/122096532

版权

Vue教程专栏收录该内容

14 篇文章 1 订阅

订阅专栏

vue教程——07 Vue生命周期和路由

- 一 vue生命周期
- 二 vue路由

一 vue生命周期

在这里插入图片描述

大白话：
beforeCreate( 创建前 )：此时vue刚实例化完，数据观测和事件配置还有被调用。此时组件的选项对象还未创建，el更没挂在。因此，这个时候无法访问methods， data， computed等上的方法和数据。
created ( 创建后）：在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el依然没有挂载。因此可以访问methods， data， computed等上的方法和数据。
beforeMount( 挂载前 ):实例在这个时候完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
mounted( 挂载后 ):挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
beforeUpdate 、updated：不常用，可以监控data里的所有数据变化。不要在update ，beforeUpdate修改不定数据，否则会引起死循环。可以在数据更新需要做统一业务处理的时候使用。
beforeDestory( 实例销毁前调用)：这时实例仍然完全可用，可以用this来获取实例。 一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件
destory( 实例销毁后调用)：不常用，这个时候，实例都被销毁。

二 vue路由

三个概念：
route：我们可以理解为单个路由对象或者某一个路由对象；
routes：我们可以理解为多个路由(route)的集合。
router：译为路由器，管理routes和route。举例：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route。

一动态路由匹配
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在router的路由路径中使用“动态路径参数”来达到这个效果：

		 const User = {
				template: '<div>User {{ this.$route.params.id }}</div>',
				watch: {
					'$route'(to, from) {
						console.log(to, from)
					}
				}
			}
			
			const router = new VueRouter({
				routes: [
					{path: '/user/:id', component: User}
				]
			})

像/user/foo和/user/bar等都将映射到相同的组件(User)。

二嵌套路由
一个非常好的例子：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body> 
  <div id="box">
    <p>
      <router-link to="/home">home</router-link>
      <router-link to="/news">news</router-link>
    </p>
     <!-- 路由匹配到的组件将渲染在这里 -->
     <!--通过 router-view标签，我们就可以指定组件渲染显示到什么位置。-->
     <router-view></router-view>
  </div>

  <!-- 模板抽离出来 -->
  <template id="home">
    <!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 -->
    <div>
      <h2>首页</h2>
       <router-link to="/home/login">登录</router-link>
      <router-link to="/home/reg">注册</router-link>
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
  </template>

  <template id="news">
    <div>新闻</div>
  </template>

  <template id="login">
    <div>登录界面</div>
  </template>
  <template id="reg">
    <div>注册界面</div>
  </template>

  <script type="text/javascript">
    // 1. 定义（路由）组件。
    const Home = { template: '#home' };
    const News = { template: '#news' };

    const Login = { template: '#login' };
    const Reg = { template: '#reg' };

    // 2. 定义路由
    const routes = [
       { path: '/', redirect: '/home' },
      { 
        path: '/home', 
        component: Home, 
        children:[
          { path: '/home/login', component: Login},
          { path: '/home/reg', component: Reg}
        ]
      },
      { path: '/news', component: News}
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
      routes // （缩写）相当于 routes: routes
    })


    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
     router
    }).$mount('#box')

    // 现在，应用已经启动了！
  </script>
</body>
</html>

三命名视图

背景：当我们打开一个页面时，整个页面可能是由多个 Vue 组件所构成的，例如，我们的后台管理首页可能是由 sidebar (侧导航) 、header（顶部导航）和 main (主内容）这三个 Vue 组件构成的。此时，当我们通过 Vue Router构建路由信息时，如果一个 URL 只能对应一个 Vue 组件，整个页面肯定是无法正确显示的。

命名视图通过在router-view标签上设定 name 属性，之后，在构建路由与组件的对应关系时，以一种 name:component 的形式构造出一个组件对象，从而指明是在哪个router-view标签上加载什么组件。

<div id="app">
    <router-view></router-view>
    <div class="container">
        <router-view name="sidebar"></router-view>
        <router-view name="main"></router-view>
    </div>
</div>

<template id="sidebar">
    <div class="sidebar">
        sidebar
    </div>
</template>

<script>
    // 1、定义路由跳转的组件模板
    const header = {
        template: '<div class="header"> header </div>'
    }

    const sidebar = {
        template: '#sidebar'
    }

    const main = {
        template: '<div class="main"> main </div>'
    }

    // 2、定义路由信息
    const routes = [{
        path: '/',
        components: {
            default: header,
            sidebar: sidebar,
            main: main
        }
    }]

    const router = new VueRouter({
        routes
    })

    // 3、挂载到当前 Vue 实例上
    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: router
    });
</script>

在这里插入图片描述

Dormiveglia-flx

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
vue教程——07 Vue生命周期和路由

vue教程——08 Vue生命周期和路由一 vue生命周期二 vue路由一 vue生命周期大白话：beforeCreate( 创建前 )：此时vue刚实例化完，数据观测和事件配置还有被调用。此时组件的选项对象还未创建，el更没挂在。因此，这个时候无法访问methods， data， computed等上的方法和数据。created ( 创建后）：在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el依然没有挂载。因此
复制链接

扫一扫

专栏目录