Vue.js 事件修饰符与路由详解-优快云博客

本文链接：https://blog.youkuaiyun.com/wx254418276/article/details/102745795

本文详细介绍了Vue.js中的事件修饰符，如.stop、.once、.prevent、.capture和.self，以及它们在事件处理中的作用。同时，讨论了计算属性(computed)的特性，包括其缓存性能和读写便利性。此外，文章还深入讲解了Vue Router的使用，包括<router-view>、<router-link>和路由控制方法如push、replace、go。最后提到了路由的监视方式，如简单的watch和更强大的‘路由守卫’，以及实现多视图的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件修饰符：

@click.stop = "fn()" 用来阻止事件冒泡，到这个地方就结束。

@click.once = "fn()" 只能执行一次，单次事件

@click.prevent = "fn()" 阻止默认事件，例如表单提交

@click.captrue = "fn()" 如果在冒泡事件中，就会优先处理外层事件，后处理内部的点击事件 (处理捕获事件)

@click.self = "fn（）" 点击自己的时候才触发这个函数

.self 和 .stop真正的区别：当别的事件触发了冒泡事件的时候，会不触发self里的事件，也就是点击button的时候不会触发inner的事件

@keydown.enter = "fn1()" 或者 @keydown.ctrl.13 = "fn1()" 用来模拟按下回车后和模拟按下ctrl+回车后执行事件

<div id="div1">
    <input type="text" @keydown.13="fn" />
</div>

<script>
    var vm = new Vue({
        el: '#div1',
        data: {
        
        },
        methods: {
            fn1(){
                alert('xxx');
            }
        }
    });
</script>

computed：计算属性

1、有缓存（性能更高，只有数据变了才重新计算）

2、方便（既可以读又可以写）

watch 监听：

vue路由：

vue-router

路由的容器用 <router-view></router-view> 来占位

<script>
let router1 = new VueRouter({
    routes: [  //路由表，里面都是路由节点
        {
            path: '/a',
            name: 'news',  //命名路由 <router-link :to="{name: 'news'}"></router-link>
            component: {template: '<div>aaa</div>'}  //组件
        },
        {
            path: '/hello/:id/',  //<router-link to="/hello/58"></router-link> 也可以写成<router-link :to="{name: 'hello', params: {id: 58}}"></router-link>
            component: {template: `<div>id是: {{$route.params.id}}</div>`} //$route里存的是当前路由的信息  //组件
        },
        {
            path: '/c',  //<router-link to="/c"></router-link>
            component: {template: '<div>ccc</div>'}  //组件
        }
    ]
});

let vm = new Vue({
    el: '#div1',
    data:{},
    router: router1 //如果名字相同可以省略冒号后面的内容
});
</script>

用 <router-link to="/a"></router-link>代替了a标签

用js来控制跳转，使用$router

<script>
let router1 = new VueRouter({
    routes: [  //路由表，里面都是路由节点
        {
            path: '/a',
            name: 'news',  //命名路由 <router-link :to="{name: 'news'}"></router-link>
            component: {
                template: '<div>aaa</div>' //组件
            } 
        },
        {
            path: '/hello/:id/',  //<router-link to="/hello/58"></router-link> 也可以写成<router-link :to="{name: 'hello', params: {id: 58}}"></router-link>
            component: {template: `<div>id是: {{$route.params.id}}</div>`} //$route里存的是当前路由的信息  //组件
        },
        {
            path: '/c',  //<router-link to="/c"></router-link>
            component: {template: '<div>ccc</div>'}  //组件
        }
    ]
});

let vm = new Vue({
    el: '#div1',
    data:{},
    beforeRouteUpdate(to, from, next){ //路由守卫
        if(to.fullPath!=from.fullPath){
            next()
            this.fn1()
        }
    }, 
    methods: {
        fn1(){
            this.$router.push('/news/58');
            //this.$router.push({name: 'news', params: {id: 58}});
        },
        fn2(){
            this.$router.push('/b');
        },
        fn3(){
            this.$router.push('/c');
        }
    },
    router: router1, //如果名字相同可以省略冒号后面的内容
    watch: { //监视路由的变化
        $route(value, old_value){
            console.log(value, old_value);
        }    
    }
});
</script>

用push(string|object) 入栈

用replace(string|object)替换当前路径，没有后退

go(int) 是history自带的

监视路由：

1、wathc --简单但是不推荐（只能看不能干预）

2、“路由守卫”（可以控制）

多视图：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" charset="utf-8"></script>
    <script src="vue-router.js" charset="utf-8"></script>
  </head>
  <body>
    <div id="div1">
      <router-link to="/">首页</router-link>
      <router-link to="/news">新闻</router-link>
      <!--1.路由容器-->
      <router-view name="header"></router-view>
      <router-view></router-view>
      <router-view name="footer"></router-view>
    </div>
  </body>

  <script>
  const headerCmp={
    template: '<div>头部</div>'
  };
  const footerCmp={
    template: '<div>底部</div>'
  };

  const newsCmp={
    template: '<div>新闻</div>'
  };

  const userCmp={
    template: '<div>用户</div>'
  };

  const indexCmp={
    template: '<div>首页</div>'
  };

  //2.路由表
  let router=new VueRouter({
    routes: [
      {
        path: '/',
        name: 'index',
        components: {
          default: indexCmp,
          header: headerCmp,
          footer: footerCmp
        }
      },
      {
        path: '/news',
        name: 'news',
        components: {
          default: newsCmp,
          header: headerCmp,
          footer: footerCmp
        }
      }
    ]
  });

  let vm=new Vue({
    el: '#div1',
    data: {},
    router
  });
  </script>
</html>