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

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属性类名

<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

---