vue使用watch监听路由地址的变化

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" con

你是人间五月天

2926人浏览 · 2020-07-12 16:43:33

你是人间五月天 · 2020-07-12 16:43:33 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .myActiveClass{
            color:blue;
            font-size: 60px;
        }

        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(140px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--vue-router提供的元素，专门用来当作占位符，将来，路由规则，匹配到的组件就会展示到这里-->
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
        <!--router-link默认渲染为一个a标签-->
        <router-link to="/login">登录</router-link>
        <router-link to="/regi">注册</router-link>
    </div>
</body>
<script>
    var login = {
        template:'<h1>这是登录组件</h1>'
    }
    var regi = {
        template:'<h1>这是注册组件</h1>'
    }
    //创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，VouRouter
    //在new路由对象时，可以为构造函数传递一个配置对象
    var routerObj = new VueRouter({
        //routes表示路由匹配规则
        routes: [
            //每个路由规则都是一个对象，必须有两个属性，
            //1 path 表示监听哪个路由链接地址
            //2 component,表示如果路由是前面匹配到的path,则展示component对应的组件
            { path: '/login',component:login},
            { path: '/regi',component:regi},
            //路由重定向
            { path: '/',redirect: '/login'}
        ],
        linkActiveClass: 'myActiveClass'
    })


    //创建一个vue实例
    //当我们导入包之后，在浏览器的内存中就多了一个vue构造函数
    var vm = new Vue({
        el: '#app',//表示当前我们new的这个vue实例要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
            flag: false
        },
        components: {
            
        },
        //将路由规则对象注册到vm对象上
        router: routerObj,
        watch: {
            '$route.path': function(newVal,oldVal){
                console.log(newVal+"----"+oldVal)
            }
        }
    });
    
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^