【Vue基础系列】vue-router 万字详解，一篇彻底搞懂

最新推荐文章于 2024-04-29 21:35:15 发布

码上游

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量1.2k

点赞数 3

分类专栏：框架 -Vue系列 # Vue基础系列文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/pakerder/article/details/128018128

版权

框架 -Vue系列同时被 2 个专栏收录

14 篇文章 4 订阅

订阅专栏

Vue基础系列

6 篇文章 2 订阅

订阅专栏

一、路由的简介

我们在生活中经常听到路由器，但关于路由可能不太了解。其实路由器就是在管理着多个路由（路由器后面的接口key，而另一端电脑或是手机等设备就是value）。

一个路由就是一组key-value的对应关系，多个路由需要经过路由器的管理。其中key为路径，value可能是function或component。

前端路由：value是component，展示页面内容。（当浏览器路径改变时，对应的组件就会显示）

后端路由：value是function，用于处理客户端提交的请求。（服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回相应数据例如：node.js）

为什么要用路由呢？

对于前端来说，路由里的key是路径，路由中的value是组件。

生活中的路由和路由器是为了完成多台设备同时上网，编码中的路由和路由器是为了实现SPA单页面应用的导航区和应用去的来回切换。（补充：SPA单页面应用中1.只有一个完整页面；2.点击导航不会刷新页面，只会做页面局部更新；3.数据通过ajax请求获取）

而在Vue中，vue-router路由是vue中的一个插件库，专门来实现单页面（SPA）应用。

二、路由基本使用

1.首先终端安装

如果是vue2安装@3，如果是vue3安装@4
npm i vue-router@版本

2.在main.js中引入

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

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

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

3.创建router文件夹，文件夹下index.js文件

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

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

4.在.vue组件中使用

<!-- 原始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 class="panel-body">
            <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>

注意：

1.文件夹pages放路由组件；文件夹components放一般组件。

2.通过切换，隐藏了的组件，默认是被销毁的，需要时再挂载。

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

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

三、嵌套路由

1.在router中index.js中进行路由配置

// 该文件专门用于创建整个应用的路由器
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:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
				}
			]
		}
	]
})

2.Home组件与其子组件配置

//Home.vue
<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>

//Message.vue
<template>
	<div>
		<ul>
			<li>
				<a href="/message1">message001</a>&nbsp;&nbsp;
			</li>
			<li>
				<a href="/message2">message002</a>&nbsp;&nbsp;
			</li>
			<li>
				<a href="/message/3">message003</a>&nbsp;&nbsp;
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Message'
	}
</script>

//News.vue
<template>
	<ul>
		<li>news001</li>
		<li>news002</li>
		<li>news003</li>
	</ul>
</template>

<script>
	export default {
		name:'News'
	}
</script>

3.效果：

四、路由的query参数

如何给路由组件传递参数？

//父组件Message
<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>&nbsp;&nbsp;

				<!-- 跳转路由并携带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>

//子组件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>

五、路由的params参数

可以看到，Detail组件的$route下有个 params参数，它有怎么用呢？

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

   {
      path:'/home',
      component:Home,
      children:[
         {
            path:'news',
            component:News
         },
         {
            component:Message,
            children:[
               {
                  name:'xiangqing',
                  path:'detail/:id/:title', //使用占位符声明接收params参数
                  component:Detail
               }
            ]
         }
      ]
   }

2. 传递参数

  <!-- 跳转并携带params参数，to的字符串写法 -->

   <router-link :to="/home/message/detail/666/你好">跳转</router-link>              
   <!-- 跳转并携带params参数，to的对象写法 -->
   <router-link
      :to="{
         name:'xiangqing',
         params:{
						id:m.id,
						title:m.title
					}
				}
      }"
        {{m.title}}
   >跳转</router-link>

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

3. 接收参数：

   $route.params.id
   $route.params.title

六、路由的props配置

1.在router中index.js中进行路由配置props三种写法

{
					path:'message',
					component:Message,
					children:[
						{
							name:'xiangqing',
							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'
								}
							}

						}
					]
				}

//子组件Detail
<template>
	<ul>
		<li>消息编号：{{id}}</li>
		<li>消息标题：{{title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		props:['id','title']
	}
</script>

七、编程式路由导航

1. 作用：不借助```<router-link> ```实现路由跳转，让路由跳转更加灵活

2.具体编码

//$router的两个API
   this.$router.push({
   	name:'xiangqing',
   		params:{
   			id:xxx,
   			title:xxx
   		}
   })
   
   this.$router.replace({
   	name:'xiangqing',
   		params:{
   			id:xxx,
   			title:xxx
   		}
   })
   this.$router.forward() //前进
   this.$router.back() //后退
   this.$router.go() //可前进也可后退

八、缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁。

2. 具体编码：

//include里的是组件名   
<keep-alive include="News">

       <router-view></router-view>

   </keep-alive>

九、两个新的生命周期钩子

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

2. 具体名字：

1. ```activated```路由组件被激活时触发。

2. ```deactivated```路由组件失活时触发。

十、路由守卫

路由守卫：保护路由的安全（权限）。像vip权限、登录权限等。

1.在router文件夹下index.js文件中设置路由守卫

// 该文件专门用于创建整个应用的路由器
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'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const router =  new VueRouter({
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About,
			meta:{title:'关于'}
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			meta:{title:'主页'},
			children:[
				{
					name:'xinwen',
					path:'news',
					component:News,
					meta:{isAuth:true,title:'新闻'}
				},
				{
					name:'xiaoxi',
					path:'message',
					component:Message,
					meta:{isAuth:true,title:'消息'},
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,
							meta:{isAuth:true,title:'详情'},

							//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'
								}
							}

						}
					]
				}
			]
		}
	]
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
	console.log('前置路由守卫',to,from)
	if(to.meta.isAuth){ //判断是否需要鉴权
		if(localStorage.getItem('school')==='atguigu'){
			next()
		}else{
			alert('学校名不对，无权限查看！')
		}
	}else{
		next()
	}
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'
})

export default router

会在localstorage中进行匹配，若不匹配，alert警告学校名不对，无权限查看！匹配才能看到数据。

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫:

 //全局前置守卫：初始化时执行、每次路由切换前执行

   router.beforeEach((to,from,next)=>{

      console.log('beforeEach',to,from)

      if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制

         if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则

            next() //放行

         }else{

            alert('暂无权限查看')

            // next({name:'guanyu'})

         }

      }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'

      }

   })

4. 独享守卫:

beforeEnter(to,from,next){

      console.log('beforeEnter',to,from)

      if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制

         if(localStorage.getItem('school') === 'atguigu'){

            next()

         }else{

            alert('暂无权限查看')

            // next({name:'guanyu'})

         }

      }else{

         next()

      }

   }

5. 组件内守卫：

  //进入守卫：通过路由规则，进入该组件时被调用

   beforeRouteEnter (to, from, next) {

   },

   //离开守卫：通过路由规则，离开该组件时被调用

   beforeRouteLeave (to, from, next) {

   }

码上游

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue基础系列】vue-router 万字详解，一篇彻底搞懂

我们在生活中经常听到路由器，但关于路由可能不太了解。其实路由器就是在管理着多个路由（路由器后面的接口key，而另一端电脑或是手机等设备就是value）。一个路由就是一组key-value的对应关系，多个路由需要经过路由器的管理。其中key为路径，value可能是function或component。前端路由：value是component，展示页面内容。（当浏览器路径改变时，对应的组件就会显示）后端路由：value是function，用于处理客户端
复制链接

扫一扫