目录

一、什么是路由?

二、如何使用路由

(一)路由的基本使用

(二)路由的跳转

(三)路由重定向

(四)选中路由高亮

(五)定义参数

(六)组件的嵌套

(七)命名视图

三、计算属性和监听器

 附: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一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computedmethods的结合体

Logo

前往低代码交流专区

更多推荐