Vue2 项目 vue-router@3.6.5 完整配置教程#

1
src/
2
├── router/                # 路由核心目录
3
│   └── index.js           # 路由配置入口文件
4
├── views/                 # 页面级组件目录
5
│   ├── Home.vue           # 首页组件
6
│   ├── Login.vue          # 登录页组件
7
│   └── NotFound.vue       # 404兜底页面组件
8
├── components/            # 公共小组件目录
9
├── App.vue                # 根组件
10
└── main.js                # 项目入口文件

1
import Vue from 'vue'
2
import VueRouter from 'vue-router'
3

4
// 解决 vue-router3 重复点击路由控制台报错问题
5
const originalPush = VueRouter.prototype.push
6
VueRouter.prototype.push = function push(location) {
7
  return originalPush.call(this, location).catch(err => err)
8
}
9

10
const originalReplace = VueRouter.prototype.replace
11
VueRouter.prototype.replace = function replace(location) {
12
  return originalReplace.call(this, location).catch(err => err)
13
}
14

15
// 全局注册路由插件
16
Vue.use(VueRouter)
17

18
// 路由规则配置
19
const routes = [
20
  {
21
    path: '/',
22
    redirect: '/home' // 根路径重定向至首页
23
  },
24
  {
25
    path: '/home',
26
    name: 'Home',
27
    component: () => import('@/views/Home.vue') // 路由懒加载，优化打包体积
28
  },
29
  {
30
    path: '/login',
31
    name: 'Login',
32
    component: () => import('@/views/Login.vue')
33
  },
34
  // 404 兜底路由，必须放置在所有路由最后
35
  {
36
    path: '*',
37
    component: () => import('@/views/NotFound.vue')
38
  }
39
]
40

41
// 创建路由实例
42
const router = new VueRouter({
43
  mode: 'history', // history模式：地址无#号；hash模式：带#号，本地打开无需后端配置
44
  base: process.env.BASE_URL, // 适配Vue-CLI内置环境变量，兼容打包部署路径
45
  routes
46
})
47

48
// 全局前置路由守卫（项目鉴权核心）
49
router.beforeEach((to, from, next) => {
50
  // to：即将跳转的目标路由对象
51
  // from：当前离开的路由对象
52
  // next：路由放行函数，必须执行
53
  const token = localStorage.getItem('token')
54
  // 未登录时，拦截所有非登录页面请求，强制跳转登录页
55
  if (to.path !== '/login' && !token) {
56
    next('/login')
57
  } else {
58
    next()
59
  }
60
})
61

62
export default router

1
import Vue from 'vue'
2
import App from './App.vue'
3
// 导入自定义路由配置
4
import router from './router'
5

6
Vue.config.productionTip = false
7

8
// 挂载路由到Vue实例
9
new Vue({
10
  router,
11
  render: h => h(App)
12
}).$mount('#app')

1
<template>
2
  <div id="app">
3
    <!-- 页面导航菜单 -->
4
    <router-link to="/home">首页</router-link>
5
    <router-link to="/login">登录页</router-link>
6

7
    <!-- 路由页面渲染出口（必不可少） -->
8
    <router-view></router-view>
9
  </div>
10
</template>
11

12
<script>
13
export default {
14
  name: 'App'
15
}
16
</script>

1
// 1. 字符串路径跳转（简单场景）
2
this.$router.push('/home')
3

4
// 2. 命名路由跳转（推荐，修改路径不影响跳转逻辑）
5
this.$router.push({ name: 'Home' })
6

7
// 3. 命名路由带参数跳转（params传参）
8
this.$router.push({ name: 'Detail', params: { id: 1001 } })
9

10
// 4. 替换当前页面（无历史记录，无法返回上一页）
11
this.$router.replace('/login')
12

13
// 5. 页面回退（-1=返回上一页，-2=返回上两页）
14
this.$router.go(-1)

1
npm run serve