vue路由基本使用以及watch监听数据

最新推荐文章于 2023-08-08 09:21:30 发布

1270015249-jmy

最新推荐文章于 2023-08-08 09:21:30 发布

阅读量614

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_47150940/article/details/108152757

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

路由

前端路由和后端路由：

后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源
前端路由：对于单页面应用程序来说，主要通过url的hash（#）来实现不同页面的切换，同时hash还有一个特点HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现
在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由

路由的使用

导入vue-router

<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>

注意：在导入路由之前，确保已导入vue，否则会报错

创建子组件

    var login = {
        template: '<h3>这是登录子组件</h3>'
    }
    var register = {
        template: '<h3>这是注册子组件</h3>'
    }

注意：是在vm实例上边创建

创建一个路由对象

创建路由对象，当导入包之后，在window全局对象中有路由构造函数–VueRouter，在new路由对象时，可以为构造函数传递一个配置对象。

注意1：这个配置对象中的route表示路由匹配规则，每个路由规则，都是一个对象，这个规则对象都有必须的两个属性

1.path，表示监听哪个路由链接的地址
2.component，表示如果路由是前面匹配到的path，则展示component属性对应的那个组件

注意2：component的属性值，必须为一个组件的模板对象，不能是组件的引用名称

    var router = new VueRouter({
        routes: [ //路由规则数组，负责分发路由
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    })

创建 Vue 实例，得到 ViewModel

将路由规则对象注册到vm实例上，用来监听url地址变化，并展示相应的组件

写法一：

    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router
    });

写法二：

    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router
    });

在页面中导入容器

由VueRouter提供的元素，用来做占位符，由路由规则匹配到的组件来展示。

  <div id="app">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>

        <router-view></router-view>
  </div>

注意：router-link默认类似于a标签，可以利用tag来修改

//修改为span标签
  <div id="app">
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>

        <router-view></router-view>
  </div>

重定向设置初识打开的页面

写法一：设置一个默认展示组件，不推荐

{path:'/',component:login},

写法二：路由redirect重定向，设置默认组件

{path:'/',redirect:'login'},

整理：

   var router = new VueRouter({
        routes: [ //路由规则数组
            {path: '/',redirect:'/login'},
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    })

打开页面就是我们设置的login，包括导航栏地址

给路由设置样式

    var router = new VueRouter({
        routes: [ //路由规则数组
            {path: '/',redirect:'/login'},
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
       linkActiveClass: 'myactive' // 和激活相关的类
    })

      .router-link-active,
      .myactive {
      color: red;
      font-weight: 800;
      font-style: italic;
      font-size: 80px;
      text-decoration: underline;
      background-color: green;
    }

路由传参

如果使用查询字符串给路由传递参数则不需要修改路由规则的path属性，使用query传递参数

//传递参数
        <router-link to="/login?id=10">登录</router-link>

//获取参数
		var login={
            template:'<h2>登录----{{$route.query.id}}</h2>'
        }

运行结果：
在这里插入图片描述

通过params方式传递路由参数，login后面会被解析为id的值

//设置路由
{path:'/login/:id',component:login},

//传递参数
<router-link to="/login/12">登录</router-link>

//获取参数
var login={
            template:'<h2>登录----{{$route.params.id}}</h2>'
        }

路由的嵌套

使用children属性实现路由嵌套,子路由path前不要加/，否则永远以根路径开始请求

<div id="div1"
    <router-link to="/account">account</router-link>
                <router-view></router-view>
</div>
<template id="tmp1">
    <div>
        <h2>account 组件</h2>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>

var router=new VueRouter({
                routes:[
                    {path:'/account',component:account,
                    children:[
                        {path:'login',component:login},
                        {path:'register',component:register}
                    ]}
                ]
            })

命名视图

命名视图在components（这时会多个s）后加属性再在使用<router-view></router-view>的时候用name引入,可以使一个页面中存在多个路由

   <router-view></router-view>
   <router-view name="left"></router-view>
   <router-view name="main"></router-view>

var router=new VueRouter({
                routes:[
                    {path:'/',components:{
                        default:header,
                        left:leftBox,
                        main:mainBox
                    }},
                    
                ]
            })

注册登录页面案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7.css">
    <style>
        #app {
            width: 300px;
            margin: 30px auto;
        }
        
        #head {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="head">
            <router-link to="/login" class="btn btn-primary">登录</router-link>
            <router-link to="/register" class="btn btn-primary">注册</router-link>
        </div>
        <router-view></router-view>
    </div>
    <!-- 登录 -->
    <template id="login">
        <div id="loginbox">
            
            <form action="" method="POST" role="form">
                <legend>登录</legend>
            
                <div class="form-group">
                    <label for="">账号：</label>
                    <input type="text" class="form-control" id="" placeholder="Input field">
                    <label for="">密码：</label>
                    <input type="text" class="form-control" id="" placeholder="Input field">
                </div>
                <button class="btn btn-primary">登录</button>
            </form>
            
        </div>
    </template>

    <!-- 注册 -->
    <template id="register">
        <div id="loginbox">
            
            <form action="" method="POST" role="form">
                <legend>注册</legend>
            
                <div class="form-group">
                    <label for="">手机号：</label>
                    <input type="text" class="form-control" id="" placeholder="Input field">
                    <label for="">验证码：</label>
                    <input type="text" class="form-control" id="" placeholder="Input field">
                </div>
                <button class="btn btn-primary">注册</button>
            </form>
            
        </div>
    </template>
</body>
<script>
    var login = {
        template: "#login"
    }
    var register = {
        template: "#register"
    }
    var router = new VueRouter({
        routes: [{
            path: "/",
            redirect: "/login"
        }, {
            path: "/login",
            component: login
        }, {
            path: "/register",
            component: register
        }]
    })
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {

        },
        router
    })
</script>

</html>

Watch

Watch概述

一个对象，键是需要观察的表达式，值是对应回调函数。
值也可以是方法名，或者包含选项的对象。
Vue 实例将会在实例化时调用 `$watch()`，遍历 watch 对象的每一个属性。

简单的监听

<body>
<div id="app">
    <input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: ''
        },
        watch: {
            num(newVal, oldVal) {
            // 监听 num 属性的数据变化
    		// 作用 : 只要 num 的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }
    })
</script>
</body>

immediate（立即处理进入页面就触发）

<body>
<div id="app">
    <input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 1
        },
        watch: {
            num: {
            	// 数据发生变化就会调用这个函数  
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true
            }
        }
    })
</script>
</body>

deep（深度监听）

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以
不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，
值为 true

<body>
<div id="app">
    <input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            food: {
                id: 1,
                name: '冰激凌'
            }
        },
        methods: {
            change() {
                this.food.name = '棒棒糖'
            }
        },
        watch: {
        	// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
        	// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
            food: {
                // 每个属性值发生变化就会调用这个函数
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true,
                // 深度监听 属性的变化
                deep: true
            },
            // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
            // 函数执行后，获取的 newVal 值和 oldVal 值不一样
            'food.name'(newVal, oldVal) {
                console.log('oldVal:', oldVal)   // 冰激凌
                console.log('newVal:', newVal)   // 棒棒糖
            }
        }
    })
</script>
</body>