Vue Router总结

1、定义：Vue Router 是 Vue.js 官方提供的路由管理器，用于在单页应用程序中实现视图的导航和组织。

2.安装和使用：使用 Vue Router 首先需要安装它。可以通过 npm 或 yarn 安装。安装完毕后，需要将其引入到 Vue.js 应用程序中。在 Vue.js 中使用 Vue Router 需要创建一个 VueRouter 实例，并将其挂载到 Vue 实例上。即创建一个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
		}
	]
})

然后在main.js中引入Vue-router，基本创建就zuow

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

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

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

3.路由配置：路由配置指定了 URL 和组件之间的映射关系。Vue Router 提供了两种路由配置方式：基于组件的路由和基于配置的路由。基于组件的路由是指每个路由映射到一个组件，而基于配置的路由是指将路由映射到一个配置对象。在配置路由时需要指定路径、组件、以及其他一些选项。

4.路由导航：路由导航是指用户从一个路由跳转到另一个路由的过程。Vue Router 提供了一些导航navigation guards），用于控制导航的流程。导航守卫分为全局守卫和路由守卫。全局守卫应用于所有路由，而路由守卫只应用于指定的路由。在route中写对应路由的信息，嵌套路由只需要在父路由中直接用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'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					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'
								}
							}

						}
					]
				}
			]
		}
	]
})

  5、嵌套路由：嵌套路由是指将一个路由嵌套在另一个路由中。嵌套路由通常用于创建页面布局，其中父路由作为页面布局的容器，而子路由则用于呈现具体的内容。在配置嵌套路由时，需要在父路由的组件中使用 router-view 元素来渲染子路由的内容。

<template>
  <div>
    <div class="row">
      <Banner/>
    </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>
	import Banner from './components/Banner'
	export default {
		name:'App',
		components:{Banner}
	}
</script>

6.路由传参：路由传参是指将数据传递给路由或从路由中获取数据。路由传参有多种方式，例如在路由配置中定义参数、在路由链接中传递参数、在组件内使用 $route 对象获取参数等。主要就是query参数和params参数。

query传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<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>

query接收参数

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

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

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

params传递参数：

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

params接收参数：

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

7.路由懒加载：路由懒加载是指将路由组件按需加载，而不是在应用程序启动时加载所有组件。这可以提高应用程序的性能和加载速度。在使用路由懒加载时，需要将组件包装在一个异步加载函数中，该函数返回一个 Promise 对