路由的使用

路由:

指向,把一个地址指向对应一个组件

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