Vue路由（vue-router）跳转

路由跳转的四种方式：

1、router-link （带参数、不带参数）；

2、this.$router.push() (函数里面调用，1.2.3)；

3、this.$router.replce() (用法同上，push)；

4、this.$router.go(n)；

不带参数跳转：

权限管理
权限管理
// 注意：router-link中链接如果是'/' 开始就是从根部路由开始，如果开始不带'/',则从当前路由开始。

带参数跳转：

菜单管理
菜单管理
// params传参数 (类似post)
// 路由配置：path："/menu/:id" 或者 path："/menu:id"
// 不配置path，第一次可请求，刷新页面id会消失；配置path，刷新页面id会保留
// html取参：$route.params.id
// script取参：this.$route.params.id
角色管理
角色管理
// query传参数（类似get，url后面会显示参数）
// html 取参    $route.query.id
// script 取参  this.$route.query.id

this.$router.push()：

1、this.$router.push('/home')
2、this.$router.push('{name：‘home}')
3、this.$router.push({path:'/home'})

this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数。

路由守卫及路由钩子

路由守卫

路由守卫，路由跳转过程中的一些钩子函数 ，在路由跳转时，做一些判断或其它的操作， 类似于组件生命周期钩子函数 。

路由钩子

主要实现方式有三种：全局实现、路由独享和组件内实现。

全局实现

使用router.beforeEach注册一个全局的before钩子。

每个钩子方法接收三个参数：

to: Route : 即将要进入的目标 [路由对象]

from: Route : 当前导航正要离开的路由

next: Function : 继续执行函数

next()：继续执行

next(false)：中断当前的导航。

next('/') 或 next({ path: '/' })：跳转新页面，常用于登陆失效跳转登陆。

路由独享

在路由配置中单独加入钩子，配置路由的时候可以直接增加beforeEnter，功能类似before。

组件内实现钩子

beforeRouteEnter：进入页面前调用，在导航确认之前调用，新组件的beforeCreate之前调用，所以特别注意它的this是 undefined。

beforeRouteUpdate (2.2 新增)：页面路由改变时调用，一般需要带参数，点击更新二级导航时调用。

beforeRouteLeave：离开页面调用，离开当前界面之前调用，用法：1. 需要的保存或者删除的数据没有完成当前操作等等原因，禁止界面跳转。

项目代码案例

创建工程

创建项目：
> vue create demo01
> cd demo01
> npm run serve

安装依赖：
> npm install vue-router@3.5.2 --save
> npm install vuex@3.4.0 --save
> npm install element-ui@2.15.6 --save

运行效果

工程结构

项目源码：main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index';
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.config.productionTip = false;
//安装Element
Vue.use(Element);

new Vue({
  render: h => h(App),
  router: router,
}).$mount('#app')

项目源码：App.vue

路由源码：router/index.js

import VueRouter from "vue-router";
import Vue from "vue"
import permissionManage from './../views/permission/permissionManage.vue'
import menuManage from './../views/menu/menuManage.vue'
import roleManage from './../views/role/roleManage.vue'

// 通过Vue.use(插件)，安装插件
Vue.use(VueRouter);

// 创建VueRouter对象
const routes=[
  {
    path: '/'
  },
  {
    path:'/permission',
    name: 'permissionManage',
    component: permissionManage
  },
  {
    path:'/menu',
    name: 'menuManage',
    component: menuManage
  },
  {
    path:'/menu/:id/:name',
    name: 'menuManageParams',
    component: menuManage
  },
  {
    path:'/role',
    name: 'roleManage',
    component: roleManage,
    meta: {
      requireAuth:true
    },
    // 路由内钩子
    beforeEnter: (to, from, next) => {
      console.log('进入前执行,beforeEnter',to, from, next);
      next();
    }
  },
  {
    path:'/user',
    name: 'userManage',
    component:() => import('./../views/user/userManage.vue')
  }
];
const router = new VueRouter({
  routes:routes
});

// 全局路由拦截-进入页面前执行
router.beforeEach((to, from, next) => {
  console.log("beforeEach",to, from,next);
  // 继续执行
  next();
});

// 全局后置钩子
router.afterEach((to, from) => {
  //不接受next
  console.log("afterEach",to, from);
});

// 导出
export default router;

views/main/Main.vue

views/permission/permissionManage.vue

views/menu/menuManage.vue

views/role/roleManage.vue

views/user/userManage.vue