目录

一、什么是路由？

二、如何使用路由

（一）路由的基本使用

（二）路由的跳转

（三）路由重定向

（四）选中路由高亮

（五）定义参数

（六）组件的嵌套

（七）命名视图

三、计算属性和监听器

 附：method、computed和watch的区别

一、什么是路由？

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

二、如何使用路由

（一）路由的基本使用

1.引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 引入js文件，这个js需要放在vue的js后面 -->
  <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

2.创建路由new VueRouter(),接受的参数是一个对象
3.在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4.path属性是url的地址,component属性就是显示的组件（传组件的对象）

    //创建路由new VueRouter(),接受的参数是一个对象
    const router = new VueRouter({
      //在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
      routes:[
        { 
          //path属性是url的地址
          path:'/index',
          //component属性就是显示的组件名称
          component: index
        },{
            path:'/detail',
            component: detail,
        },
      ],
    });

5.创建的路由需要和vue实例关联一下

在vue实例中与data、methods同级的位置加入一个属性router：‘路由的名字’
6.路由到的组件显示在哪个位置？在父组件中加入<router-view></router-view>

  <div id='app'>
    <router-link to="/index">index </router-link>
    <router-link to="/detail">去详情 </router-link>
    <button @click="todetail"> q去详情页</button>
    <button @click="toMine"> 个人中心页</button>
    <!-- 路由到的组件显示在哪个位置<router-view></router-view> -->
    <router-view></router-view>
  </div>

（二）路由的跳转

1.router-link标签可以设置to属性

·默认是a标签，可以通过tag设置包裹标签

<div>
      <router-link to="/detail">去详情 </router-link>
      <!-- 通过query的方式在url后加?参数名=参数的值
        获取参数：$route.query.参数名 -->
      <router-link to="/detail?id=104&name='zs'">去详情（参数拼接）</router-link>
      <!--  -->
      <router-link :to="{path:'/detail',query:{id:103,name:'zs'}}">去详情（query对象传参） </router-link>
      <!-- 使用浏览器参数的方式传递参数，这种方式必须加params对象 
      获取参数$route.params.参数名-->
      <router-link :to="{name:'my',params:{userid:234}}"> 去个人中心（params对象传参） </router-link>
    </div>

2.函数式跳转

      methods: {
        // 函数式跳转
        todetail(){
            // this.$router.push('/detail')
            this.$router.push({path:'/detail'})
        },
        toMine(){
          // this.$router.push({path:'/mine',query:{id:104,name:'lisi'}})
            this.$router.push({
                name:"my",
                params:{userid:999}
            })
        }
      },

（三）路由重定向

redirect可以进行路由的重定向

      routes:[
        {  //路由的重定向 redirect
          path:'/',
          redirect:'/index',
        },
        { 
          //path属性是url的地址
          path:'/index',
          //component属性就是显示的组件名称
          component: index
        },{
            path:'/detail',
            component: detail,
        },
        // 路径传参
        {   
            path:'/mine/:userid',
            component:mine,
            // params传参，设置name
            name:'my'
        }
      ],

（四）选中路由高亮

1.使用默认的样式

        直接设置router-link-active

    /* 1.使用默认的高亮样式
      直接设置router-link-active */
    .router-link-active{
        font-size: 30px;
        color: hotpink;
    }

2.自定义样式

        在路由实例中与routes同级配置 linkActiveClass:'自定义的类名'

    //创建路由new VueRouter(),接受的参数是一个对象
    const router = new VueRouter({
      //在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
      routes:[
        {  //路由的重定向 redirect
          path:'/',
          redirect:'/index',
        },
        { 
          //path属性是url的地址
          path:'/index',
          //component属性就是显示的组件名称
          component: index
        },{
            path:'/detail',
            component: detail,
        },
        // 路径传参
        {   
            path:'/mine/:userid',
            component:mine,
            // params传参，设置name
            name:'my'
        }
      ],
      // 自定义高亮，配置 linkActiveClass:'自定义的类名',此时原有的高亮失效
      linkActiveClass:"myactive"
    });

（五）定义参数

1.通过query的方式在url后加?参数名=参数的值

<template id="index">
    <div>
      <router-link to="/detail">去详情 </router-link>
      <!-- 通过query的方式在url后加?参数名=参数的值
        获取参数：$route.query.参数名 -->
      <router-link to="/detail?id=104&name='zs'">去详情（参数拼接）</router-link>
      <!--  -->
      <router-link :to="{path:'/detail',query:{id:103,name:'zs'}}">去详情（query对象传参） </router-link>
    </div>
  </template>

获取参数：$route.query.参数名

let detail = {
        template: '#detail',
        created(){
            console.log(this);
            //  获取参数：$route.query.参数名
            console.log(this.$route.query.id);
        }
    }

2.使用浏览器参数的方式传递参数

<template id="index">
    <div>
      <!-- 使用浏览器参数的方式传递参数，这种方式必须加params对象 
      获取参数$route.params.参数名-->
      <router-link :to="{name:'my',params:{userid:234}}"> 去个人中心（params对象传参） </router-link>
    </div>
  </template>

获取参数$route.params.参数名

    let mine = {
        template: '#mine',
        created(){
            console.log(this);
            // 2.获取参数$route.params.参数名
            console.log(this.$route.params);
        }
    }

（六）组件的嵌套

1.声明路由的时候设置children,这是children是一个数组，数组里是路由对象

{
            path:'/detail',
            component: detail,
            //声明路由的时候设置children,这是children是一个数组，数组里是路由对象
            //这个children的组件就会渲染在它父组件的<router-view>中
            children:[
              {
                // 注意children中的子路由的对象中的path属性的内容不加/,如果加/ 会被解析为根路由
                path:'play',
                component:play
              },{
                path:"course",
                component:course
              }
              
            ]
        },

注意children中的子路由的对象中的path属性的内容不加/ ， 如果加/ 会被解析为根路由

2.这个children的组件就会渲染在它父组件的<router-view>中

<template id="detail">
      <div>
          详情页
          <router-link to="/detail/play"> play</router-link>
          <!-- //这个children的组件就会渲染在它父组件的<router-view>中 -->
        <router-view></router-view>
      </div>
  </template>

（七）命名视图

1.我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件

 { 
         path:'/detail',
         // 使用compones可以定义多个组件
          components: {
         // 通过default属性可以设置默认的组件，默认组件只有一个，不写名字也可以渲染
          default:detail,
          play:play,
          course
         }
 }

2.components属性设置的
3.给router-view设置名字，这个名字和components组件名字是对应的

<div id='app'>
        命名视图
      1.我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
      2.components属性设置的
      3.给router-view设置名字，这个名字和components组件名字是对应的
      4.设置默认值default对应组件可以设置名字也可以访问
        <!-- 预留展示区域 -->
        <router-view class="header"></router-view>
        <!-- 给router-view设置名字，这个名字和components组件名字是对应的 -->
        <router-view name="play" class="left" ></router-view>
        <router-view name="course" class="right"></router-view>
    </div>

4.设置默认值default对应组件可以设置名字也可以访问

三、计算属性和监听器

1.watch：监听data中属性的改变

const vm = new Vue({
          el: '#app',
          data: {
              firstName:"",
              lastName:"",
              // name:"",
          },
          // watch监听data中属性的改变
          watch:{
              firstName:function(value){
                  console.log(value);
                  this.name = this.firstName + '-' +this.lastName
              },
              lastName:function(value){
                  console.log(value);
                  this.name = this.firstName + '-' +this.lastName
              },
          },
      })

2.computed：默认只有getter的计算属性，定义有getter和setter的计算属性

（1）getter：只要该表达式中含有的data中的数据发生改变时，该属性中的数据就会发生改变

（2）setter：只有当自身发生改变的时候才触发

const vm = new Vue({
          el: '#app',
          data: {
              firstName:"",
              lastName:"",
              // name:"",
          },
          // 属性计算
        computed: {
              // 属性不能和data中重复
              // name() {
              //     return this.firstName + '-' +this.lastName;
              // },
              name: {
                  get:function(){
                      return this.firstName + '-' +this.lastName;
                  },
                  // 只有当自身发生改变的时候才触发
                  set(value){
                      console.log(value);
                      console.log(value.split('-'));
                      if( value.split('-').length ==2){
                          this.firstName = value.split('-')[0]
                      this.lastName = value.split('-')[1]
                      }
                  }
              },
          },
      })

 附：method、computed和watch的区别

1.computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；

2.methods方法表示一个具体的操作，主要书写业务逻辑；

3.watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体

# vue.js # javascript # 前端
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue