乐趣区

关于vue.js:后端小伙伴来学前端了VueRouter-路由各种跳转传参小知识

作者：

jiezi

在

前言

学完Vuex方面的操作就该来学学Vue中的路由操作了…. xdm冲

一、装置

vue-cli 装置

vue add router

做完这一步根底环境都搭好了。

我的项目中会多一个

文件夹，内容如下：

最初裸露进去，在mian.js 中援用进去就能够了。临时先不细讲。

二、根本路由应用

根本路由应用，其实你装置完就曾经有例子啦。

在App组件中 有上面这两行代码，其实就路由跳转的意思。

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |

咱们以前是用a标签，这里只是帮咱们封装了。这里配置好的/及/about都是router文件夹下配置好的路由规定，每个门路和哪个组件绝对应。

成果如下：

点击就能跳转.

这是最根底的,看看就完事了,因为咱们应用这种形式挺少的,基本上在路由跳转的过程中都是要做很多事件的.

然而大家发现了没有，只有内容变了，为啥呢？

因为app组件中 <router-view/> 这个代码，意思就是切换路由时，将组件内容放到这里展现。

这最根本的，大家轻易玩玩都会的，咱们不多说。

问个小问题，这个路由跳转的过程中，原来的哪个组件是被暗藏了，还是销毁了呢？？？

三、嵌套路由(套娃)

效果图：

就是在home和about下别离来个路由，也非常容易。

咱们先加两个组件

咱们再router中进行配置一下。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/message',
        name: 'message',
        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    children: [
      {
        path: '/news',
        name: 'news',
        component: () => import(/* webpackChunkName: "about" */ '../components/News.vue'),
      },
    ]
  }
]

其实也就牵扯到children这一个属性，就是和下级路由造成父子关系啦。套娃两层是这么套，那么套再多就是在外面接着写就完事了。

一次套娃一次爽，始终套娃一爽快

四、路由传参

成果

咱们再加一个两个子路由，在外面实现路由传参。另外把原来的组件改一下。

4.1、搭建根底环境

MessageItem组件

<template>
  <div>
    <p>音讯编号：???<//p>
    <p>音讯题目：???<//p>
  </div>
</template>

NewsItem组件

<template>
  <div>
    <p>新闻编号：???</p>
    <p>新闻标题：???</p>
  </div>
</template>
<script>

这里的??？是稍后用来接管路由传参的哈。

News组件

<template>
  <div>
    <ul>
      <li v-for="newItem in news" :key="newItem.id">
        <router-link to="/item">{{newItem.id}}:{{newItem.title}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data(){
    return {
      news:[
        {id:1, title:"001新闻"},
        {id:2, title:"002新闻"},
        {id:3, title:"003新闻"}
      ]
    }
  }
}
</script>

Message组件

<template>
  <div>
      <ul>
      <li v-for="message in messages" :key="message.id">
        <router-link to="/item">{{message.id}}:{{message.title}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
    data(){
    return {
      messages:[
        {id:1, title:"001信息"},
        {id:2, title:"002信息"},
        {id:3, title:"003信息"}
      ]
    }
  }
}
</script>

4.2、query参数

第一种：to 的字符串写法

URL传参，组件用$route.query 取值

Message组件

<li v-for="message in messages" :key="message.id">
    <router-link :to="`/item?id=${message.id}&title=${message.title}`">{{message.id}}:{{message.title}}</router-link>
</li>

留神这里的 to后面是加了引号的，并且两头的 内容也是用 `符号润饰的

MessageItem组件

<div>
    <p>音讯编号：{{$route.query.id }}</p>
    <p>音讯题目：{{$route.query.title }}</p>
</div>

第二种：to的对象办法

      <li v-for="message in messages" :key="message.id">
        <!-- to的字符串写法 -->
        <!-- <router-link :to="`/item?id=${message.id}&title=${message.title}`">{{message.id}}:{{message.title}}</router-link> -->

        <!-- to的对象写法 -->
        <router-link :to="{
          path: '/item',
          query: {
            id: message.id,
            title: message.title
          }
        }">{{message.id}}:{{message.title}}</router-link>
      </li>

另外一边接管的形式还是同上。

4.3、params参数

第一种：to的字符串写法

跳转链接还是差不多的，然而必须在路由规定中进行配置

<router-link :to="`/item/${message.id}/${message.title}`">{{message.id}}:{{message.title}}</router-link>
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/message',
        name: 'message',
        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
        children: [
          {
            path: '/item/:id/:title', // 应用占位符申明接管params参数
            name: 'messageItem',
            component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue')
          }
        ]
      }
    ]
  },

接管的也稍稍有变动：

<p>音讯编号：{{$route.params.id }}</p>
<p>音讯题目：{{$route.params.title }}</p>

第二种：to的对象写法

<!-- to的对象写法 -->
<router-link 
   :to="{
         name: 'messageItem',
         params:{
                 id:message.id,
                 title: message.title
                }
          }">
    {{message.id}}:{{message.title}}</router-link>

留神：这里必须用 name ，即配置好的路由名称，不可能应用路由门路。

4.4、路由的props配置（偷懒的好工具）

咱们思考一个问题哈。

你有没有感觉{{$route.params.id }}或者{{$route.params.title }} 这样子去取一个路由传过来的值，非常反复呢？？？

取每个值，都还要写一遍$route.params 或者是$this.query这个前缀，有没有感觉非常反复，那么有没有更简略的呢？

（一个两个还是简略的，万一有天传的多了，这个props必定是能偷懒的哈🐥）

1）props配置形式一：

{
    path: '/',
        name: 'Home',
            component: Home,
                children: [
                    {
                        path: '/message',
                        name: 'message',
                        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
                        children: [
                            {
                                path: '/item/:id/:title',
                                name: 'messageItem',
                                component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue'),
      //第一种形式：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给MessageItem组件
                                props:true
                            }
                        ]
                    }
                ]
},

传递 params 参数的父组件啥都不必改，

咱们改一下接管的子组件

<template>
<div>
    <!-- <p>音讯编号：{{$route.query.id }}</p>
<p>音讯题目：{{$route.query.title }}</p> -->
    <!-- <p>音讯编号：{{$route.params.id }}</p>
<p>音讯题目：{{$route.params.title }}</p> -->
    <!-- 通过props 接管 -->
    <p>音讯编号：{{id }}</p>
    <p>音讯题目：{{title }}</p>
    </div>
</template>
<script>
    export default {
        props:['id','title']
    }
</script>

2）props配置形式二：

思考一下，下面的那个办法只能解决传递params参数时进行缩写，那么如果是传递query参数形式该怎么办呢？

props 配置其实能够改成一个函数的哈

留神：记得在练习的时候，

{
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/message',
        name: 'message',
        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
        children: [
          {
            path: '/item',
            name: 'messageItem',
            component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue'),
            // props:true
            //第二种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给MessageItem组件
            props($route) {
              return {
                id: $route.query.id,
                title: $route.query.title
              }
            }
          }
        ]
      }
    ]
  },

想接管什么，咱们就是在这边写啥就完事了，到了子组件，就是间接用了。

解构写法

props({query}) {
    return {
        id: query.id,
        title: query.title
    }
}

更偷懒的就是间断解构：

props({query:{id,title}}) {
    return {id,title}
}

果然是偷懒使人提高啊。

五、编程式路由

5.1、编程式实现路由跳转

之前咱们都是借助 <router-link to="/news">新闻</router-link> 这个来实现路由的跳转，但理论开发中都是通过点击按钮或者是触发什么事件，而后才进行跳转的，所以应用router-link并不是特地适合。才有了编程式路由。

      <li v-for="message in messages" :key="message.id">
        <router-link
          :to="{
            path: '/item',
            query: {
              id: message.id,
              title: message.title,
            },
          }"
        >
          {{ message.id }}:{{ message.title }}</router-link
        >
        |
        <button type="button" @click="showMessageItem( message.id, message.title,)">
          点击跳转到{{ message.title }}页面
        </button>
      </li>

利用办法进行跳转

methods: {
    showMessageItem(id,title){
        this.$router.push(
            {
                path: '/item',
                query: {
                    id: id,
                    title:title
                }
            })
    }
}

如果是params 也是和之前一样的；

showPamarsMessageItem(id,title){
    this.$router.push(
        {
            name: 'messageItem',
            params: {
                id: id,
                title:title
            }
        })
}

相干的信息也要改哈，路由中配置的props啥的。

5.2、编程式管制后退后退

对于浏览器中的后退后退按钮，咱们大家必定是不生疏哈。

其实这个也是能够用编程式的形式来实现的。

<template>
  <div id="app">
    <button id="back" @click="back">后退</button> | 
    <button id="forward" @click="forward">后退</button> |
    <button id="forward" @click="go">go</button>

    <div id="nav" >
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  methods: {
    back(){
      console.log(this.$router)
      this.$router.back()
    },
    forward(){
      this.$router.forward()
    },
    go(){
      //间接说这个go () 的参数是一个数字 ，负数就是后退多少步，
      // 正数就是回退多少步。
      this.$router.go(2)
    }
  }
}
</script>

其实都是通过$router上的api来实现的，然而如果是无痕状态下，还是无奈实现的，因为这些实现还是须要依附浏览器的历史记录的。

效果图：

六、缓存路由组件

作用：让不展现的路由组件放弃挂载，不被销毁。

咱们在MessageItem组件中写上一个beforeDestroy销毁之前的钩子函数

<template>
  <div>
    <p>音讯编号：{{ id }}</p>
    <p>音讯题目：{{ title }}</p>
  </div>
</template>
<script>
export default {
  name: 'MessageItem',
  props:['id','title'],
  beforeDestroy(){
    console.log('MessageItem组件被销毁了')
  }
}
</script>

当咱们从MessageItem组件切换到其余页面时，就会打印出这个。

然而如果咱们在应用他的父组件身上改成上面这样的。

<keep-alive include="MessageItem"> 
    <router-view></router-view>
</keep-alive>

留神:include中写的是组件名。组件名。组件名。

如果不写include，是默认全副都缓存，不销毁。

这样写就会保障MessageItem在切换的过程中不会被销毁。

如果切换的异样频繁的话，我感觉加上这个还是能够的。

七、两个新的生命周期钩子函数

在第六大节，咱们能够把组件进行缓存，然而同时也会造车组件的beforeDestroy生命周期钩子函数生效。

那么有些革除操作将会没法执行（如切换路由，让定时器暂停），所以就有了两个路由的独有的生命周期钩子函数。

  1. activated路由组件被激活时触发。
  2. deactivated路由组件失活时触发。
activated(){
    console.log('MessageItem被激活了')
},
    deactivated(){
        console.log('MessageItem失活了')
    }

后语

大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感激。

纸上得来终觉浅，绝知此事要躬行。

大家好，我是博主宁在春：主页

一名喜爱文艺却踏上编程这条路线的小青年。

谢谢你，可能看到这里。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章