路由的配置

Vue路由的配置

准备工作：搭建脚手架

(1）安装 vue-cil : npm install vue-cli -g
(2）检查是否安装成功： vue-V
(3）初始化一个新的项目：vue create 项目名称

一. 一级路由的配置

(1）引入路由

	import Vue from 'vue'
	import Router from 'vue-router'
	// 在vue中使用路由
	Vue.use(Router)

(2）创建路由实例

// (1) 引入相应的组件
	 import Home from "@/views/homes"
 
	// 创建路由实例
	let router = new Router({
		// (2) 当在浏览器上访问这个path时，就映射到相应的路由组件
		routes:[
	        {
	        	path:"/home",  // 组件的路径
	        	component:Home // 路由组件的名称
	        }
	     ]
	})

通用写法：
创建路由表并配置在路由器中

// (1) 路由表存储在数组 routes中

var routes = [
	
	   {
	     path：路径,
	     component：路由组件
	   },
	]
	
	// 路由实例
	let router = new Router({
	    routes
	})
	   
	export default router

(3）切换路由组件

		a标签：会产生页面的跳转， 可以使用 声明式导航router-link切换

  //  转换此标签为li,点击跳转到 url为 /main 的组件
    <router-link to="/main" tag="li"  > 
     
    </router-link>

二. 多级路由的配置

在创建路由表的时候，可以为每一个路由对象创建children属性，值为数组；这个里面可以配置一些路由对象来使用多级路由。

二级路由有两种写法：

const routes = [
			
	{path:'/main',component:AppMain},
	 // 一级路由
	  {
	  	path:'/news',
	  	component:AppNews,
	  
	  // 二级路由 (两种写法)
	  	children:[
	   	  {
	    	// (1)'/news'代表一级路由的path,前面加 '/'
	    	path:"/news/inside",
	    	component:AppNewsInside
	     },
	     {
	    	// (2) 不写一级路由的路径，也不要写 '/'
	    	path:'outside',
	    	component:AppNewsOutside
	     }
	   ]},
	]

二级路由组件的切换位置依然由router-view来指定

(要指定在父级路由组件的模板中)

<router-link to='inside'>inside</router-link>
<router-link to='outside'>outside</router-link>

 <router-view></router-view>

三. 路由的懒加载

懒加载也叫延迟加载，即：在需要的时候进行加载，随用随再。
为什么要用懒加载:

在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多、延时过长，不利于用户体验。

而运行懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

非按需加载则会把所有的路由组件快js包打在一起，当业务包很大的时候建议用路由的按需加载(懒加载)

按需加载会页面第一次请求的时候，把相关路由组件块的js添加上

( 观察Network,里面的js文件拆分成了多个，只有访问的时候才让wabpack切割它，并进行异步加载，加载出的结果会被缓存，未来可以进行重渲染 )
语法：

// 不需要单独引入组件了
   {
      path: '/about',
      name: 'about',
      
      // component:Center,
      // 换成路由懒加载方式，在component中引入组件
      component:()=>import("@/views/Center"),
    }
	    

默认切割后的js文件名是数字

设置切割后的js的别名：

// 通过注释进行修改
 component:()=>import(/* webpackChunkName: "cinema" */"@/views/Cinema")

四. 默认路由和重定向

当我们进入应用，默认想实现某一个路由组件，或者当我们进入 某一级路由组件的时候，想默认显示其中某一个子路由组件，我们可以配置默认路由

(如：进入页面后，默认显示的是首页的内容)

// 设置默认路由
			{
				path:'',
				component:Main
			}

当我们需要进入之后进行重定向到其他路由的时候，或者当url与路由表不匹配的时候，页面可能会出现404，我们可以设置一个重定向页面
(网址栏随便添加内容，网页不识别，可以默认跳到一个存在的页面中)

// 如果url地址栏 访问/ 就切换到 /main路由中
			
	{
		path:'/',
		redirect:'/main'
	}
	
	// 如果上面的这些path都没有匹配上，会切换到/main路由中
	{
		path:'*',
		redirect:'/main'
	},

五. 路由的命名

我们可以给路由对象配置name属性，这样的话 我们在跳转的时候，直接写name:main就会快速的找到此nam属性对应的路由了，不需要写大量的url path路径了

index.js 的路由表中配置name；

{
path:"guonei",
	component:Guonei,
	// 给 path进行命名，后续可以通过这个名字找到它
	name:"guonei"
},
{
	path:"guoji",
	component:Guoji,
	// 给此path命名为guoji
	name:"guoji"
}

动态路由

路由传参的参数主要有两种：路由参数、queryString参数

1. 路由参数

(1) 路由表里配置:

{
// 配置接收内容的额参数(id)
	path:'/detail/:id',
	component:Detail
}

上述代码就是给Detail路由配置了接收的参数id，(多个参数可以继续在后面设置)

(2) 跳转时传参

<router-link to="/detail/1">文章一</router-link>
<router-link to="/detail/2">文章二</router-link>
			

(3) detail组件中调用参数

<template>
   <div>
     详情页面 --- {{$route.params.id}}
  </div>
</template>

prop将路由与组件解耦

在组件中接收路由参数需要 this.$route.params.id，代码冗余；现在可以在路由表里配置props:true

{
path:‘detail/:id’,
component:Detail,
name:‘detail’,
props:true
}

配置成功后，路由自己中可以通过props接收id参数去使用了

<script>
	export default {
	  props:["id"],
	}
</script>
	
// 模板中调用
<template>
  <div>
    详情页面  ---{{id}}
  </div>
</template>

2. querySting参数

querySting参数不需要在路由表设置接收，直接设置在 ‘?’ 后面的内容里即可，在路由组件中通过this.$route.query接收
(1) 传参

<router-link to="/detail/2?title=文章1">文章一</router-link>
<router-link to="/detail/2?title=文章2">文章二</router-link>

(2) detail组件中调用

<template>
  <div>
     详情页面 --- {{$route.query.title}}
   </div>
</template>