在Vue脚手架中使用路由

在Vue脚手架中使用路由（供自己后期复习使用,如果哪里不对希望大佬指正）

路由基本使用
路由的几个注意点
嵌套（多级）路由
路由命名
路由的query和params参数以及props接收参数
编程式路由导航
路由组件的两个新的生命周期钩子

路由守卫：路由守卫

---

路由的基本使用

最开始先创建好vue脚手架，这个就不用多说了。
1.首先使用npm包管理器安装好路由用的包

npm i vue-router

2.在main.js 中引入并且使用路由

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

3.创建一个名为router的文件夹 里面再创建一个index.js的文件 该index.js文件专门用于创建整个应用的路由器（编写router配置项）

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   export default router

写好这些配置项之后，在main.js中引入这些配置项

import router from './router'


new Vue({
router,
render: h => h(App)
}).$mount('#app')

写好以上这些以后，运行脚手架若路径中出现#则表示路由配置好了

4. 实现切换
   普通的html标签跳转的时候可以用href来跳转，而vue-routert提供一种特殊的标签来进行跳转：

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

5. 指定展示位置

   <router-view></router-view>
   

最终写好的代码：

<template>
<div>
 <div class="row">
   <div class="col-xs-offset-2 col-xs-8">
     <div class="page-header"><h2>Vue Router Demo</h2></div>
   </div>
 </div>
 <div class="row">
   <div class="col-xs-2 col-xs-offset-2">
     <div class="list-group">
       <router-link to="/about">About</router-link>
       <router-link 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>

最终演示效果：

路由的几个注意点

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

嵌套（多级）路由

在router文件下的index.js中配置
接着在home.vue中写好跳转路径，跳转时一定要写完整路径

代码演示：

命名路由

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

2. 如何使用

   1. 给路由命名：

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

   2. 简化跳转：

      <!--简化前，需要写完整的路径 -->
      <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>
      

路由的query和params参数以及props接收参数

query参数

1. 传递参数（传递时两种写法：一种字符串写法，一种对象写法）

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

2. 接收参数：

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

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:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>
   

3. 接收参数：

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

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

props：

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

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

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

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

编程式路由导航

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. 具体名字：
   1. activated路由组件被激活时触发。
   2. deactivated路由组件失活时触发。