路由:
指向,把一个地址指向对应一个组件
router:
路由的实例化对象,管理整个路由
route:
提供当前路由的基本信息
基本路由传参
传:
语法:
this.$router.push(’/path地址?参数名=值&参数2=值2’)
this.$router.push({
path:'/path地址',
query:{
参数名:值,
参数2:值2
}
})
收:
this.$route.query.参数名
this.$route.query.参数2
动态路由匹配
路由配置:
{
// ?代表参数值可传可不传,不写?一定要传
path:'/xxx/:参数名?',
component...
}
传:
this.$router.push(’/xxx/123’)
收:
this.$route.params.参数名
name传参
路由配置:
{
path:'/',
name:'home',
....
}
传: (刷新不受影响)
this.$router.push({name:‘home’,query:{参数名: 参数值}}) —和以前基本路由传参一样
收:
this.$route.query.参数名
传 (params) : 刷新后传参就没了,数据长度与数据类型不受限制
this.$router.push({name:‘home’,params:{参数名: 参数值}}) —和以前基本路由传参一样
收 (params)
this.$route.params.参数名
项目中,路由的基本使用
1.安装
npm i vue-router
2.新建文件
src/router/index.js
将路由导入文件
import VueRouter from 'vue-router'
3.注册
import Vue from 'vue'
Vue.use(VueRouter)
4.实例化
const router=new VueRouter({
routes:[
{
path,
name,
meta,
component,
components:{
default:默认组件,等效于上面的component:组件,
xxx:对应xxx组件, router-view name="xxx"
}
redirect,
children,
alias...:别名
}
]
})
5.暴露
export default router
6.在main.js文件中挂载
import router from '@/router'
new Vue({
router
})
7.路由出口
router-view标签
路由钩子函数
全局路由钩子
- beforeEach:
- afterEach
- beforeResolve
路由所对应组件钩子 (路由配置中的component所对应组件)
- beforeRouteEnter: 进入前,进入路由所对应组件前,在beforeCreate前产生的,它不能使用实例化对象this
- beforeRouteUpdate:更新前,路由更新了,但是路由所对应组件不变,它是更新前触发,更新没有完成,如果需要获取更新完成后信息,要加$nextTick
- beforeRouteLeave:离开前,切换页面离开前就会触发,它在beforeDestroy前执行
路由配置所对应钩子
- beforeEnter: 读取路由配置前会执行该钩子
进入一个页面时路由钩子执行先后
beforeEach ===> beforeEnter ===> beforeRouteEnter ===> beforeResolve ===> afterEach
路由更新时路由钩子执行先后
beforeEach ===> beforeResolve ===> afterEach