乐趣区

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

前言

学完 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 失活了')
    }

后语

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

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

大家好,我是博主 宁在春:主页

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

谢谢你,可能看到这里。

退出移动版