Vue-Router路由所有相关方法讲解(全)，实战教学含登录拦截，万字长文，建议收藏

目录

router的基本使用

main.js

App.vue

router文件夹下的index.js(抽离router)

动态传参+编程式导航

App.vue

user.vue组件

 嵌套路由

 路由传参,懒加载

router的index.js

Info组件

User组件

App.vue

 守卫钩子（全局+独享+组件内的守卫）

登录页

路由

About.vue

补充 ：

解决重复点击路由报错：

$route和$router的区别：

---

router的基本使用

main.js

• 挂载路由

import Vue from 'vue'
import App from './App'
// 默认导入router文件夹下的内容
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//挂载路由，把路由注入为Vue对象方便使用
  render: h => h(App)
})

App.vue

• 路由跳转的两种方法

router-link 其他属性： 

• to:用于指定跳转的路径
• tag:可以指定router-link标签之后渲染成什么html元素
• replace(没有返回记录):在history模式下指定router-link使用的是replaceState,而不是一个pushState()
• active-class:设置对应路由匹配成功时，会给当前选中元素设置一个active-class属性类名

router文件夹下的index.js(抽离router)

路由模式：

hash:历史模式，不会制造页面刷新
history:不会有历史，不会制造页面刷新

注意：路由重复点击会报错，降级router插件到到3.5版本以下 

此处可以配置活跃路由的类名，如果多个router-link都要类名，可以在路由中统一配置

// 引用文件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
// 1.通过Vue.use(插件)，安装插件
Vue.use(Router)

// export default（导出） 将Router对象传入到vue实例
export default new Router({
  // 2.创建Router对象
  // 配置路由和组件之间的映射关系
  // routes是固定写法
  routes: [
    {
      path:'',
      // 重定向
      redirect:'/home'
    },
    {
      // 定义路径
      path: '/home',
      name: 'HelloWorld',
      // component显示
      component: Home
    },
    {
      path:'/about',
      component:About //组件名
    },
  ],
  mode:'history',
  // 全局配置激活路由的class类名，处与活跃（动态）就会用上这个类名
  linkActiveClass:'active'
})

动态传参+编程式导航

路由路径后加/:id就可以变成动态路由

App.vue

user.vue组件

 嵌套路由

页面中使用this.$route:获取活跃的组件；

this.$router:获取router整个路由

//配置路由的相关信息
import Vue from 'vue'

import Router from 'vue-router'

// 1.通过vue.use安装插件
Vue.use(Router);

// 引用组件
import Home from '../components/Home.vue'
import User from '../components/User.vue'
import News from '../components/News.vue'
import Msg from '../components/Msg.vue'

// 配置路由和组件之间的引用关系
const routes =[
  {
    path:'/',
    // 重定向redirect
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home ,
    // 使用嵌套路由用children属性
    children:[
      {
        path:'/home',
        redirect:'/home/news'
      },
      {//子路由加斜杠会被当作根路径
        path:'news',
        component:News
      },
      {
        path:'msg',
        component:Msg
      },
    ]
  },
  {
    path:'/user/:id',
    component:User 
  },
]

// 创建vue-router对象
const router = new Router({
  routes,
  // 没历史
  mode:'history',
  linkActiveClass:'active'
})

// 3.把router导出给vue实例
export default router

// $route:指向活跃的组件
// $router:指向router整个路由

 路由传参,懒加载

router的index.js

/配置路由的相关信息
import Vue from 'vue'

import Router from 'vue-router'

// 1.通过vue.use安装插件
Vue.use(Router);

// 懒加载
const User = ()=> import('../views/User.vue')
const Info = ()=> import('../views/info.vue')
const routes =[
  // {
  //   path:'/home',
  //   name:'Home',//命名路由
  //   component:Home 
  // },
  {
    // 配置动态路由
    path:'/user/:id',
    name:'User',
    // 懒加载
    component:User
  },
  {
    path:'/info',
    name:'Info',
    component:Info
  },
]

const router = new Router({
  routes,
  // 没历史
  mode:'history',
  // linkActiveClass:'active'
})

// 3.把router导出给vue实例
export default router

Info组件

User组件

App.vue

 守卫钩子（全局+独享+组件内的守卫）

登录页

路由

//配置路由的相关信息
import Vue from 'vue'
import Router from 'vue-router'
// 1.通过vue.use安装插件
Vue.use(Router);
// 懒加载
const User = ()=> import('../views/User.vue')
const Info = ()=> import('../views/info.vue')
const Login = ()=> import('../views/Login.vue')
const routes =[
  {
    // 配置动态路由
    path:'/user/:id',
    name:'User',
    // 懒加载
    component:User，
    // 独享路由守卫
    beforeEnter(to, from, next){
      next()
    }
  },
  {
    path:'/info',
    name:'Info',
    component:Info
  },
  {
    path:'/Login',
    name:'Login',
    component:Login
  },
]

const router = new Router({
  routes,
  // 没历史
  mode:'history',
  // linkActiveClass:'active'
})

// 全局前置钩子：beforeEach
// 在进入前做一些事
// to:要去的路由
// from:来的路由
// next:放行，默认参数是false
//上面把账号密码放到window这里也可以访问到
router.beforeEach((to,from,next)=>{
  if(to.name !=='Login'){//验证是否登录
    if(window.uname && window.upass){
      next();
    }else{
      alert('请先登录')
      next('/Login')
    }
  }
  next();
})

// 全局的后置
// to:要去跳转的路由
// from:来的路由
router.afterEach((to,from)=>{
  console.log('欢迎'+window.uname);
})

export default router

About.vue

补充 ：

解决重复点击路由报错：

1.在路由页引入以下代码：

//Router自己定义的路由名
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location){
  return originalPush.call(this,location).catch(err=>err);
}

2.或者直接降低router版本到3.5以下 。

$route和$router的区别：

• $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
• $route为当前router跳转对象里面可以获取name、path、query、params等

小编公_号：前端老实人；期待各位小伙伴加入同学们一起学习的队伍讨论哦❤