前言
学完 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
生命周期钩子函数生效。
那么有些革除操作将会没法执行(如切换路由,让定时器暂停),所以就有了两个路由的独有的生命周期钩子函数。
activated
路由组件被激活时触发。deactivated
路由组件失活时触发。
activated(){console.log('MessageItem 被激活了')
},
deactivated(){console.log('MessageItem 失活了')
}
后语
大家一起加油!!!如若文章中有不足之处,请大家及时指出,在此郑重感激。
纸上得来终觉浅,绝知此事要躬行。
大家好,我是博主
宁在春
:主页一名喜爱文艺却踏上编程这条路线的小青年。
谢谢你,可能看到这里。