路由的配置及基本使用（多级路由，命名路由，parms参数query参数，编程式路由导航，缓存路由组件，路由守卫，路由的两种工作模式）

一、路由的概念及配置

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

路由器的作用 ：路由负责为数据包选择转发路劲。

1.1路由的安装和配置

（1）安装:npm i vue-router

（2）应用插件：Vue.use(VueRouter)

（3）编写router配置项：

//引入路由
import  VueRouter form 'vue-router'
 
//引入路由组件
 
 
//创建一路由实例，去管理一组一组的路由归责
const router = new VueRouter({
    routers:[
        {
            path:'/路径名'
            component：'引用的组件名'
        }
    ]
})
 
export  default  router  //暴露路由对象。

（4）在main.js中引入VueRouter 和router

（5）并且在vue实例中配置router

//引入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
})

二、多级路由和路由的命名

使用children：[]配置子级路由，使用name：’‘属性来定义路由的名字

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

三、parms参数和query参数

3.1parms参数路径之后/参数1/参数2

需要在路由的path路径中写参数占位

routers:[
    {
        path:'/路径名/：参数名/：参数名2'
    }
]

 在组件模板中传送参数

在组件模板中使用参数

 

消息编号：{{$route.params.id}}

query参数在路径之后？键值对   对象书写法

	"{
					name:'xiangqing', //入股喔屎parms参数使用对象写法，这个地方一定要路由的name
					query:{
						id:m.id,
						title:m.title
					}
				}">

四、编程式路由导航

 作用：不借助实现路由跳转，让路由跳转更加灵活

//写在组件内部的methods方法中
methods：{
tiaozhuan(){
        //$router的两个API
    this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
    		}
    })
}
tiaozhuan_tidai(){
    this.$router.replace({
	    name:'xiangqing',
		    params:{
			    id:xxx,
			    title:xxx
		    }
    })
}
 
//点击前进一个历史路径
qianjin(){
    this.$router.forward() //前进
}
houtui(){
    this.$router.back() //后退
}
qianjin_houtui(){
    this.$router.go() //可前进也可后退
    }
}

 五、路由缓存组件

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

"News"> //缓存路由组件 include中的值是，组件的名字，保持某个路由组件不被销毁，如果要保持多个include写成数组的形式：include =“['组件名','组件名']”
    <router-view>router-view>

六、路由守卫

6.1全局路由路由守卫

 写在路由配置文件当中

router.beforeEach(to,from,next){}  完成进入组件之前

router.afterEach(to,form){}完成进入组件后

6.2独享路由守卫

 写在目标路由中间

beforeEnter（to,form,next）{}进入组件之前

6.3组件路由守卫

写在组件中

beforeRouteEnter（）{} 进入组件之前R

beforeRouteLeave（）{}离开组件之后

七、路由器的两种工作模式

1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。

2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

3. hash模式：

   1. 地址中永远带着#号，不美观 。

   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。

   3. 兼容性较好。

4. history模式：

   1. 地址干净，美观 。

   2. 兼容性和hash模式相比略差。

   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。