『分分钟玩转VueRouter●上』VueRouter的一些基础配置

前言

计算机网络中有一个路由的概念：路由是指网络数据包发送到目的地址的路线，如果路由规划合理，那么数据走的速度就更快，延迟就更低，网络体验就更好。vue中的路由与其有着很多相似之处指的就是浏览器所请求的url，如果合理的使用VueRouter可以提升用户体验、可以提高Web应用的稳定性。

Vue Router是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。
VueRouter有官方的教程，写的还是很好的点击传送VueRouter。在Vue中路由与组件存在一对一、多对一的关系。

通过VueRouter可以轻松的实现以下功能：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

在介绍使用VueRouter之前先看一下他可以实现的效果，可以看出在进行路由切换的时候，页面并没有刷新。
我们在使用VueRouter的时候要达到这种效果，在此基础之上学会编程式路由、路由守卫、多用户路由权限区分等编程小技巧。

一、vue中如何使用VueRouter?

1. 安装vue-router，命令：

npm i vue-router

2. 应用插件：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3. 编写router配置项:

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

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		//创造一个路由映射关系，将about路径与About组件相对应（{}中的内容就可以认为是一个路由）
		{
			path:'/about',
			component:About
		},
		//创造一个路由映射关系，将home路径与Home组件相对应
		{
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

4. 实现切换（active-class可配置高亮样式）
   这里的实例会将路由跳转至about路径，并渲染about路径对应的组件。

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

6. 指定展示位置
   负责对当前级别的路由进行展示，将下面代码加入到展示页面的组件中相应的部位即可

<router-view></router-view>

注意点:

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。

二、路由使用的基本配置

1.多级路由配置

多级路由的使用在项目中是常见的，经常使用的是2、3级路由，过多的级别会使程序混乱，如何配置多级路由在下面有介绍。

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		//配置Home路径下的子级路由
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

多级路由的跳转（要写完整的路径）

<router-link to="/home/news">News</router-link>

当然除了在配置路由时有多级路由，在进行展示时也会有多级路由，例如下面一个场景
App.vue（父组件）
这里的router-view称为一级路由展示。

<router-view></router-view>

Lists.vue（子组件）
这里的router-view称为二级路由展示。

<router-view></router-view>

路由嵌套使用是日常开发中常用的一个套路。

2.路由中的query参数

query参数与params参数均是get请求的参数，只不过在路由中的写法不一样

param参数与query参数的区别：

• query参数通过路由传参的时候需要写成?..的形式
  例：/home/message/detail?id=666&title=你好
• 而param参数传递的时候直接以路由的方式写，只不过需要预设占位符
  例：/home/message/detail/666/你好

传递参数：

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		//这个query后面可以跟VueComponent中的属性
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

接受参数：
通常可以在路由守卫中接收到参数，然后执行相应的操作。

$route.query.id
$route.query.title

3.命名路由

作用：可以简化路由的跳转。

使用方式如下：

• 给路由命名：

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

• 简化跳转

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

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

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

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

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

3. 接收参数：在VueComponent中接受路由传过来的参数时如下

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

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "News",
  computed:{
    ids(){
      return this.$route.query.id
    },
    title(){
      return this.$route.query.title
    }
  }
};

5.路由的props配置

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

• 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
  // props:{a:900}

• 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
  // props:true

• 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

6.router-link的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace
   • push是追加历史记录。
   • replace是替换当前记录。
   • 路由跳转时候默认为push
3. 如何开启replace模式：<router-link replace .......>News</router-link>

7.通配符路由

通配符路由一般放在所有路由之后，用于解决404等页面。下面代码是一个常用的通配符
放在路由配置项最下面用于匹配任意找不到的路径

{
    name: "404",
    path: "*",
    //异步加载路由组件
    component: () => import("../components/Nofind")
}

这种会匹配以 /user- 开头的任意路径

{
  path: '/user-*' 
}

---

路由的基础知识就讲到这里啦，大家如果有什么好的想法或者疑问欢迎评论区留言。