vue-router

路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Frame from '@/views/layout/frame'

Vue.use(Router)
    //路由
const routes = [{
        path: '/main',
        name: 'main',
        component: Frame,
        children: [
            // {
            //     path: '/user/detail',
            //     name: 'user_detail',
            //    redirect: '/main/:username'  //重定向
            //     component: () =>
            //         import ('@/components/user/Detail.vue')
            // },
            {
                path: '/user/info',
                name: 'user_info',
                component: require('@/views/user/user-info.vue').default
            }
        ],
    },
    {
        path: '/login',
        name: 'login',
        component: require('@/views/login.vue').default
    }

];


//使用路由
const router = new Router({
    mode: 'history', //去除路由路径#号
    routes
})

//导出路由
export default router;

使用

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-view></router-view>
  </div>
</template>

// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");

参数传递

:id 这样的占位符

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile}

router-link

<router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>

代码方式

this.$router.push({ name: 'UserProfile', params: {id: 1}});

props接收

设置props为true

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true}

接收方

  export default {
    props: ['id'],
    name: "UserProfile"
  }

路由中的钩子函数

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

 export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
       // 注意，一定要在 next 中请求，因为该方法调用时 Vue 实例还没有创建，此时无法获取到 this 对象，在这里使用官方提供的回调函数拿到当前实例
      next(vm => {
//异步请求获取数据
        vm.getData();
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    }
  }

to：路由将要跳转的路径信息
from：路径跳转前的路径信息
next：路由的控制参数
- next() 跳入下一个页面
- next('/path') 改变路由的跳转方向，使其跳到另一个路由
- next(false)返回原来的页面
- next((vm)=>{})仅在 beforeRouteEnter 中可用，vm 是组件实例