Vue路由

前言

1. 掌握路由的使用
2. 实现经典布局

1、路由是什么？

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

2.使用步骤

1 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
2 创建路由new VueRouter(),接受的参数是一个对象
3 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4 path属性是url的地址,component属性就是显示的组件（传组件的对象）
5 创建的路由需要和vue实例关联一下
6 路由到的组件显示在哪个位置<router-view</router-view

  <div id="app">

    <!--留一个路由的空间 -->
    <router-view></router-view>
  </div>

let son = Vue.component("son", {
      template: "#son"
    })
    // 1.实例化一个路由  rooter 与下面的实例化挂在的名称对应上
    const router = new VueRouter({
      //2. 创建组件和路由的映射关系
      routes: [{
        path: "/",
        component: Vue.component("father", { template: "<h1>我是父组件</h1>" }),
      }, {
        path: '/son',
        component: son
      }

      ]

    //创建Vue实例,得到 ViewModel
    const vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // 创建联系，挂在到Vue的实例上
      router,    //es6  属性和属性名 相同时，省略属性名
    });
  </script>

3.路由的跳转

  js跳转  第三种方式
    this.$router.push({path:'/mine',query:{mineid:103}})
    this.$router.push({name:'params',params:{name:this.msg}})

1 router-link标签可以设置to属性
2 默认是a标签，可以通过tag设置包裹标签

<router-link to='/login'>登录</router-link>
<router-link to='/registry'>注册</router-link>

3.1 路由重定向

 routes: [
        {
          path: "/index",
          component: father,
        },
        {
          // 通过这种方式，在访问/路径的时候会重定向到/login路径
          path: "/", redirect: "/index"
        },
       ]

4.路由的高亮

1. 使用默认的样式
   直接设置router-link-active
2. 自定义样式
   配置 linkActiveClass:‘自定义的类名’

  <style>
    .router-link-active {
      color: red;
      font-size: 40px;
    }
    .nicai {
      color: hotpink;
      font-size: 30px;
    }
  </style>
在定义好的new VueRouter里面
  // 	自定义样式   配置 linkActiveClass:'自定义的类名'
      linkActiveClass: "nica"

5.路由的传参

5.1 query传参

    let son = {
      template: "#son",
      data() {
        return {
          courseid: 106
        }
      }
    };

<template id="son">
    <div>
      我是子组件
      <router-link to="/son">调到子组件</router-link>
      <router-link to="/index?courseid=105">第一张方式 父组件</router-link>
      <router-link :to="{path:'/index',query:{course:105}}">第二种方式</router-link>
      <!-- 穿一个对象过去 -->
      <router-link :to="{path:'/index',query:{course:courseid}}">第三种方式</router-link>
    </div>
  </template>

5.2 params传参

 <router-link to="/son/103"> 去子页面</router-link>
      <router-link :to="{name:'son',params:{id:777}}"> 去子页面2</router-link>
      <router-link :to="{name:'son',params:{id:fatherdata1,nama:'lisi'}}"> 去子页面3</router-link>

    // 定义一个实例化路由
    const router = new VueRouter({
      routes: [
        {
          path: "/index",
          component: father,
        },
        { path: "/", redirect: "/index" },
        // 定义必传参数
        {
        
        //1.	设置路由的时候/路由地址/:参数名
		//2.	获取参数$route.params.参数名
          path: "/son/:id/:name",
          component: son,
          name: "son"
        },
      ],
      linkActiveClass: "suibian",
    });

6.组件嵌套

1. 声明路由的时候设置children,这是children是一个数组，数组里是路由对象
2. 这个children的组件就会渲染在它父组件的<router-view中

<template id="father">
    <div>
      父组件
      <router-view></router-view>
    </div>
  </template>

routes: [
        {
          path: "/index",
          component: father,
          children: [
            {
              path: "son",
              component: son
            }
          ]
        },
        {
          path: "/",
          redirect: "/index"
        },
      ]

7. 命名视图

1. 我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
2. components属性设置的
3. 给router-view设置名字，这个名字和components组件名字是对应的
4. 设置默认值default对应组件可以设置名字也可以访问

  <div id='app'>

    <router-view></router-view>
    <router-view name="son1"></router-view>
    <router-view name="son2"></router-view>
  </div>

 routes: [
        {
          path: "/",
          redirect: "/index",
        },
        {
          path: "/index",
          components: {
            default: father,
            son1: son1,
            son2
          },
          children: [
            {
              path: "son",
              component: son
            }
          ]
        }
      ]

8. 计算器属性和监听器

8.1 Method实现

 methods: {
        getvalue() {
          this.sum = this.num1 + this.num2
        }
      },
      updated() {
        this.sum = this.num1 + this.num2
      }

8.2 keyup实现

 <input type="text" v-model:value="num1" @keyup="getvalue">+
    <input type="text" v-model:value="num2" @keyup="getvalue"><button @click="getvalue">=</button>

methods: {
        getvalue() {
          this.sum = this.num1 + this.num2
        }
      },

8.3 watch 实现

和date methods 平级

watch: {
        // 参数是属性
        第一个参数是新数据，第二个参数是旧数据
        "firstname": function () {
          this.allname = this.firstname + "-" + this.lastname;
        },
        "lastname": function () {
          this.allname = this.firstname + "-" + this.lastname;
        },
      },

8.4 computed 实现

computed: {
// 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 sum的值
        sum: {
          get: function () {
            return this.sum = this.num1 + "-" + this.num2
          },
          set: function (newVal) {
            this.num1 = newVal.split("-")[0]
            this.num2 = newVal.split("-")[1]
          }
        }
      }

8.5 method、computed和watch的区别

1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
2. methods方法表示一个具体的操作，主要书写业务逻辑；
3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体