Young Kbt blog
Young Kbt
2022-07-28
目录

Vue2 - Vue路由

# 介绍

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

前端路由：key 是路径，value 是组件。

# 基本使用

安装 vue-router，命令：

npm install vue-router@4
# 或者
yarn add vue-router@4
1
2
3

应用插件：

Vue.use(VueRouter)
1

编写 router 配置项:

// 引入 VueRouter
import VueRouter from 'vue-router'
// 引入 Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

// 创建 router 实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
        {
			path:'/home',
			component:Home
		},
		{
			path:'/about',
			component:About
		},
	]
})

// 暴露 router
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

main.js 引入 router：

// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
// 引入 VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'

// 应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

其中两个组件内容为：

<template>
	<h2>我是Home的内容</h2>
</template>

<script>
	export default {
		name:'Home'
	}
</script>
1
2
3
4
5
6
7
8
9
<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About'
	}
</script>
1
2
3
4
5
6
7
8
9

实现切换（active-class 可配置高亮样式，点击该标签触发）（router-link 标签解析后变成 a 标签，to 就是 href）

<router-link active-class="active" to="/about">About</router-link>
1

指定展示位置（to 的地址内容放在这里，类似插槽，自动插入内容）

<router-view></router-view>
1

完整的 app.vue 代码：












 
 






 

















<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始 html 中我们使用 a 标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->
            
            <!-- Vue 中借助 router-link 标签实现路由的切换 -->
          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
			<!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name:'App',
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 几个注意点

  • 路由组件通常存放在 pages 文件夹，一般组件通常存放在 components 文件夹

    src
|—— components
|	|—— 一般组件
|—— pages
|	|—— 路由组件
|—— router
	|—— index.js
|—— App.vue
|—— main.js
    1
    2
    3
    4
    5
    6
    7
    8
    9

  • 通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候再去挂载

  • 每个组件都有自己的 $route 属性，里面存储着自己的路由信息

  • 整个应用只有一个 router，可以通过组件的 $router 属性获取到

# 嵌套路由和默认路由

配置路由规则，使用 children 配置项：

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

// 创建并暴露一个路由器
export default new VueRouter({
	routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ // 通过 children 配置子级路由
			{
				path:'news', // 此处一定不要写：/news
				component:News
			},
			{
				path:'message',// 此处一定不要写：/message
				component:Message
			}
		]
	}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

跳转（要写完整路径）：

<template>
	<div>
		<h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
				</li>
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
				</li>
			</ul>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Home',
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

默认路由：进入组件默认显示另一个组件，而不需要点击显示（About 组件有 <router-view><router-view> 时，自动把 MainContent 组件放入该标签中）

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import MainContent from '../pages/MainContent'

// 创建并暴露一个路由器
export default new VueRouter({
  routes:[
    {
      path:'/about',
      component: About,
      redirect: '/mainContent', // 重定向到 /mainContent 请求，即触发下面的 path
      children:[
        {
          path: '/mainContent',
          name: 'MainContent',
          component: MainContent,
        }
      ]
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

About 组件自动把 MainContent 组件替换 <router-view><router-view>

<template>
	<div>
        <router-view><router-view>
    </div>
</template>

<script>
	export default {
		name:'About'
	}
</script>
1
2
3
4
5
6
7
8
9
10
11

# 手动添加路由

有些组件我们不一定直接在路由的配置文件写好，有可能在某个组件出发某个条件，然后手动的在组件添加一个路由，那么用到 addRoute 方法

<template>
  <div class="home">
    <button @click="handleLogin" v-if="!isLogin">Login</button>
  </div>
</template>

<script>
import router from '@/router'
export default {
  name: 'Home',
  methods: {
    handleLogin () {
		router.addRoute({
            path: '/privatePage', name: 'privatePage', component: () => import('./PrivatePage.vue')
		})
	}
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

此时 等价于 手动在路由的 js 配置文件添加：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/privatePage',
    name: 'privatePage',
    component: () => import('./PrivatePage.vue'), name: 'privatePage'
  }
]

const router = new VueRouter({
  routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 路由的query参数

home/message/detail 是 Detail 的组件路由地址

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import Home from '../pages/Home'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

// 创建并暴露一个路由器
export default new VueRouter({
  routes:[
    {
      path:'/home',
      component:Home,
      children:[
        {
          path:'message',
          component:Message,
          children:[
            {
              path:'detail',
              component:Detail,
            }
          ]
        }
      ]
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

传递参数（两种写法：字符串写法。对象写法）

<!-- 跳转并携带 query 参数，t o的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带 query 参数，to 的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
           title:'你好'
		}
	}"
>跳转</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13

当然我们需要将数据放到 data 里：

<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- 跳转路由并携带 query 参数，to 的字符串写法 -->
				<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
                
				<!-- 跳转路由并携带 query 参数，to 的对象写法 -->
				<router-link :to="{
					path:'/home/message/detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link>
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'001',title:'消息001'},
					{id:'002',title:'消息002'},
					{id:'003',title:'消息003'}
				]
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

Detail 组件接收参数：



 
 












<template>
	<ul>
		<li>消息编号：{{$route.query.id}}</li>
		<li>消息标题：{{$route.query.title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		mounted() {
			console.log(this.$route)
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 命名路由

当有个嵌套路由时，我们访问最深层的路由需要 /A/B/C/D 这样，就像上面访问 Detail 组件的路由地址是 /home/message/detail，但是这个地址比较长，我们能不能给这个路由地址取个短的「别名」呢？

当然可以，写个 name 属性即可，给路由命名：










 








{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                    name:'kele' // 给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

于是就有三个版本的跳转：完整版、简化版、配合参数版：

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'kele'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'kele',
		query:{
		   id:666,
           title:'你好'
		}
	}"
>跳转</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 路由的params参数

配置路由，声明接收 params 参数














 







{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'kele',
					path:'detail/:id/:title', // 使用占位符声明接收 params 参数
					component:Detail
				}
			]
		}
	]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

传递参数

<!-- 跳转并携带 params 参数，to 的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带 params 参数，to 的对象写法 -->
<router-link 
	:to="{
		name:'kele',
		params:{
		   id:666,
           title:'你好'
		}
	}"
>跳转</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13

接收参数：

$route.params.id
$route.params.title
1
2

特别注意：路由携带 params 参数时，若使用 to 的对象写法，则不能使用 path 配置项，必须使用 name 配置。

即不能这样写：

<router-link 
	:to="{
		path:'/home/message/detail',
		params:{
		   id:666,
           title:'你好'
		}
	}"
>跳转</router-link>
1
2
3
4
5
6
7
8
9

# 路由的props配置

我们知道子组件能通过 props 接受父组件传过来的参数，那么父路由传参时，也可以将参数放到 props 里给子路由使用，这样就不用通过 $route.query 获取。

作用：让路由组件更方便的收到参数

export default new VueRouter({
  routes:[
    {
      path:'/home',
      component:Home,
      children:[
        {
          path:'message',
          component:Message,
          children:[
            {
              name:'kele',
              path:'detail',
              component:Detail,

              // props 的第一种写法，值为对象，该对象中的所有 key-value 都会以 props 的形式传给 Detail 组件
              props:{a:1,b:'hello'},

              // props 的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有 params 参数，以 props 的形式传给 Detail 组件
              props:true,

              // props 的第三种写法，值为函数
              props($route){
                return {
                  id:$route.query.id,
                  title:$route.query.title,
                  a:1,
                  b:'hello'
                }
              }
            }
          ]
        }
      ]
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Message 组件

<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- 跳转路由并携带params参数，to的字符串写法 -->
				<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
                <!-- 跳转路由并携带params参数，to的对象写法 -->
				<router-link :to="{
					name:'kele',
					query:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link>
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'001',title:'消息001'},
					{id:'002',title:'消息002'},
					{id:'003',title:'消息003'}
				]
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# router-link的replace属性

开启 replace 模式：

<router-link replace .......>跳转</router-link>
1

replace 属性作用：控制路由跳转时操作浏览器历史记录的模式。

浏览器的历史记录有两种写入方式：分别为 push 和 replace，push 是追加历史记录，replace 是替换当前记录：

  • 当处于 push 模式时，我们打开一个页面，就会往历史记录追加之前的记录，我们可以通过浏览器的左上角的返回键来返回上一个网址
  • 当处于 replace 模式时，我们在页面 A 打开页面 B，则页面 B 就会在历史记录中替换掉页面 A ，也就是我们无法返回页面 A，它被替换了（等价清除掉了）

路由跳转时候默认为 push。

# 编程式路由导航

不借助 <router-link> 实现路由跳转，我们主动写 API 让路由进行跳转，这样路由跳转更加灵活。

常用的 API 有 push、replace、forward、back、go(number)。

// $router 的两个 API
this.$router.push({
	name:'kele',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
	name:'kele',
		params:{
			id:xxx,
			title:xxx
		}
})
this.$router.forward() // 前进
this.$router.back() // 后退
this.$router.go(number) // 可前进也可后退，number 是数字，前进几次（正数）或者后退几次（负数）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 缓存路由组件

当我们从组件 A 跳转到组件 B 时，组件 A 默认被销毁。

假设一个场景，组件 A 是表单，在组件 A 填写了大部分信息后，有一个额外信息需要跳转到另一个组件去填写，但是我们填完额外信息回到组件 A 时，发现之前填写的信息都清空了，这就是组件 A 被销毁了，当我们重新回到组件 A 时，就会创建一个新的组件 A。

因此我们需要缓存之前的组件，让不展示的路由组件保持挂载，不被销毁。

用到 <keep-alive></keep-alive> 标签包裹 <router-view></router-view>：

<!-- 一种组件缓存 -->
<keep-alive include="组件"> 
    <router-view></router-view>
</keep-alive>

<!-- 多种组件缓存 -->
<keep-alive include="['组件1','组件2','组件3']"> 
    <router-view></router-view>
</keep-alive>
1
2
3
4
5
6
7
8
9

# 两个新的生命周期钩子

被 keep-alive 缓存的组件激活时调用。

当组件被激活时、或者失活时，会触发生命周期钩子。

这是 路由组件所独有 的两个钩子，用于捕获路由组件的激活状态。

具体名字：

  • activated 路由组件被激活时触发。
  • deactivated 路由组件失活时触发。

注意：激活或者失活不是销毁，比如一种激活方式是回到页面，一种失活方式是切换页面。

<template>

</template>

<script>
	export default {
		name:'News',
		activated() {
			console.log('News组件被激活了')
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
		deactivated() {
			console.log('News组件失活了')
			clearInterval(this.timer)
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 路由守卫

当进行路由跳转时，我们可以对路由进行监控，根据权限规则进行拦截，比如防止跳转到没有权限的网站。

路由守卫有三种：全局守卫、独享守卫、组件内守卫

# 全局守卫

全局守卫，就是能拦截 Vue 所有的路由跳转，在路由的 js 文件里添加 meta 的信息，然后进行验证：










 





 





























// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 创建并暴露一个路由器
const router =  new VueRouter({
	routes:[
        {
			name:'zhuye',
			path:'/home',
			component:Home,
			meta:{title:'主页'},
			children:[
				{
					name:'xinwen',
					path:'news',
					component:News,
					meta:{isAuth:true,title:'新闻'}
				},
			]
		}
	]
})
// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'kele'){ // 权限控制的具体规则
			next() // 放行
		}else{
			alert('暂无权限查看')
		}
	}else{
		next() // 放行
	}
})

// 全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title // 修改网页的 title
	}else{
		document.title = 'vue_test'
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 独享守卫

独享守卫是作用在某个路由组件上，配置依然在路由的 js 文件:

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import Home from '../pages/Home'
import News from '../pages/News'

// 创建并暴露一个路由器
const router =  new VueRouter({
  routes:[
    {
      name:'zhuye',
      path:'/home',
      component:Home,
      meta:{title:'主页'},
      children:[
        {
          name:'xinwen',
          path:'news',
          component:News,
          meta:{isAuth:true,title:'新闻'},
          beforeEnter: (to, from, next) => {
            console.log('独享路由守卫',to,from)
            if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制
              if(localStorage.getItem('school')==='kele'){
                next()
              }else{
                alert('学校名不对，无权限查看！')
              }
            }else{
              next()
            }
          }
        },
      ]
    }
  ]
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 组件内守卫

组件内守卫，即不用在路由的 js 文件配置，而是在某个组件里进行配置，当进入当前组件、或者离开当前组件，都能进行拦截：

<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About',
		// 通过路由规则，进入该组件时被调用
		beforeRouteEnter (to, from, next) {
			console.log('About--beforeRouteEnter',to,from)
			if(to.meta.isAuth){ // 判断是否需要鉴权
				if(localStorage.getItem('school')==='youngkbt'){
					next()
				}else{
					alert('学校名不对，无权限查看！')
				}
			}else{
				next()
			}
		},

		// 通过路由规则，离开该组件时被调用
		beforeRouteLeave (to, from, next) {
			console.log('About--beforeRouteLeave',to,from)
			next()
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 路由器的两种工作模式

对于一个 url 来说，什么是 hash 值？

# 及其后面的内容就是 hash 值，hash 值不会包含在 HTTP 请求中，即：hash 值不会带给服务器，所以我们可以在 # 后面随便写，它不会影响请求。

hash 模式

  • 地址中永远带着 # 号，不美观
  • 若以后将地址通过第三方手机 App 分享，若 App 校验严格，则地址会被标记为不合法
  • 兼容性较好

history 模式

  • 地址干净，美观
  • 兼容性和 hash 模式相比略差
  • 应用部署上线时需要后端人员支持，解决刷新页面服务端 404 的问题

模式使用：在路由的 js 文件配置加入 mode，然后进行选择

// 引入 VueRouter
import VueRouter from 'vue-router'
// 引入 Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

// 创建 router 实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    mode: 'history', // 或者 mode: 'hash'
	routes:[
		{
			path:'/about',
			component:About
		},
	]
})

// 暴露 router
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
编辑此页 (opens new window)
#Vue
更新时间: 2023/09/18, 16:34:13
Vue2 - Vuex
Vue3 - 测试

← Vue3 - 测试→

最近更新
01
技术随笔 - Element Plus 修改包名 原创
11-02
02
Reactor - 扩展性
11-02
03
Reactor - 最佳实践
11-02
更多文章>
Theme by Vdoing | Copyright © 2021-2024 Young Kbt | blog
桂ICP备2021009994号