VUE学习-router的使用

最新推荐文章于 2024-07-04 00:59:27 发布

巴呆丶

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量184

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45981924/article/details/108302775

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ref属性的使用：
在VUE中可以通过对一些标签绑定ref属性(ref=“xxx”)，再通过this.$ refs.xxx的方式获取原生的jsDOM对象，可以通过这种方式来操作dom重新渲染。如果ref属性绑定的是一个组件，那么this.$refs.xxx获取的就是这个组件对象。
值得注意的是，根据vue的生命周期mounted是在dom元素第一次渲染完成之后执行，所以在mounted之前的created、beforeMount中是无法通过ref获取标签的dom元素。
$refs与 $nextTick的联合使用：
在实际开发过程中，往往会出现需要获取某个标签元素的dom并修改dom属性增加事件让其重新渲染，但在实际使用时发现，获取dom元素之后添加事件，结果并没有实现，如下：

<template>
  <div>
	<input type="text" ref="input" v-show="isShow" />
  </div>
</template>

<script>
  export default {
  	data() {
  	  return {
	    isShow: false,
	  }
  	},
  	mounted() {
	  this.isShow = true;
	  this.$refs.inpu.focus();	//input框获取焦点方法
	}
  }
</script>

实际运行发现，input输入框并没有获取到焦点，这是由于dom元素的改变更新了dom，所以事件没有正常触发。$nextTick()是在dom更新后执行回调函数，在数据更新后执行此方法

<script>
  export default {
  	data() {
  	  return {
	    isShow: false,
	  }
  	},
  	mounted() {
	  this.isShow = true;
	  this.$nextTick(() => {
		this.$refs.input.focus();
	  })
	}
  }
</script>

Router的使用

在学习使用router之前，先去了解一下SPA的概念。SPA是单页面应用，全称是single page application，单页面应用就是只有一张web页面应用，用户与应用程序交互操作产生的变化会动态刷新在当前页面中。它的实现是通过锚点值得改变，不立即重新请求加载页面，而是在一个合适的时间通过ajax请求局部渲染页面。与之相对的就是传统的通过url跳转的多页面开发，早期我开始学习Java时，练习使用的前端页面是用jsp或者html画的，往往一个简单的页面请求会通过url值跳转不同页面，这种方式会导致一个问题就是当页面元素过多时，频繁跳转页面需要重新加载，且当页面元素过多时页面会出现长时间白屏情况，用户体验感很差。
接下来，我在代码中展示router在一个html页面中的简单使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app"></div>
    <!-- 引入Vue模块 -->
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入vue-router模块 -->
    <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
      var Login = {
        template: '<div>我是登录页面</div>'
      };
      var Register = {
        template: '<div>我是注册页面</div>'
      }
      //创建router对象
      var router = new VueRouter({
        // 配置路由对象
        routes:[
          {
            path:'/login',
            component:Login
          },
          {
            path:'/register',
            component:Register
          }
        ]
        
      });
      var App = {
        template: `
        <div>
          <router-link to="/login">登录页面</router-link>
          <router-link to="/register">注册页面</router-link>
          <router-view></router-view>
        </div>
        `
      }
      
      new Vue({
        el:'#app',
        data() {
          return {
            
          }
        },
        components: {
          //交给Vue实例化对象管理
          router,
          App
        },
        template:`<App />`
      })
    </script>
	</body>
</html>

引入vue-router组件后会抛出两个全局组件，router-link和router-view，其中router-link会渲染成为a标签，router-link有一个to属性，这个属性值相当于a标签中的href值，router-view是路由匹配组件的出口。
同时，也可以通过给路由对象命名，再使用name的方式绑定路由

routes:[
  {
	path:'/login',
	name:'login',
	component:Login
  }
]

<div>
  <router-link to="{name:'login'}> </router-link>
</div>

巴呆丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习-router的使用

ref属性的使用：在VUE中可以通过对一些标签绑定ref属性(ref=“xxx”)，再通过this.$ refs.xxx的方式获取原生的jsDOM对象，可以通过这种方式来操作dom重新渲染。如果ref属性绑定的是一个组件，那么this.$refs.xxx获取的就是这个组件对象。值得注意的是，根据vue的生命周期mounted是在dom元素第一次渲染完成之后执行，所以在mounted之前的created、beforeMount中是无法通过ref获取标签的dom元素。$refs与 $nextTick的联合
复制链接

扫一扫