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

<button @click=“homeClick”>首页

<button @click=“aboutClick”>关于

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

<button @click=“toHome”>首页

<button @click=“toUser”>用户

user.vue组件

用户组件

欢迎 {{uname}} 来到用户页面

//输出一或二切换

输出名字：{{$route.params.id}}

嵌套路由

=====

页面中使用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组件

这是信息组件

//$route接收参数

姓名：{{$route.query.name}}

年龄：{{$route.query.age}}

User组件

用户信息

//页面中有两个params.id，点击谁就显示哪个id

用户编号{{$route.params.id}}

App.vue

user|

info

<button @click=“toUser”>user

---

user–name

info-path

<button @click=“toInfo”>info

---

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

===================

登录页

登录

账号：

密码：<input

type=“text”

v-model=“userPass”

/>

<button @click=“login”>登录

路由

//配置路由的相关信息

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’,

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

// 懒加载

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’,

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-bjzZtEoX-1715658956386)]

[外链图片转存中…(img-MfUHhcbE-1715658956387)]

[外链图片转存中…(img-a4H17Y7F-1715658956387)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！