[JavaScript知识库]vue-router（params，props，query）

路由的query参数

传递参数有两种方式

（1）在<router-link :to='路由+传参'>

<!--      <div v-for="item of detiel">-->

<!--        <router-link  :to="'/list?id='+item.id+'&title='+item.title">{{item.id}}</router-link>-->

<!--      </div>-->

（2）跳转并携带query参数，to的对象写法

      <!--      使用query进行跳转-->
<!--      <router-link :to="{path:'/',query:{id:2,title:'好大儿'}}">点击</router-link>-->
<!--      <ul>-->
<!--        <li>{{$route.query.title}}</li>-->
<!--      </ul>-->

接收参数

$route.query.id

路由params参数

传递参数

（1）跳转并携带params参数，to的字符串写法

<router-link :to="/home/message/detail/666/你好">跳转</router-link>

（2）跳转并携带params参数，to的对象写法

<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

特别注意：路由携带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
		}
	}
}

router-link的replace属性

作用：是用来控制路由跳转时操作浏览器历史记录的模式

1. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

? ? ? 2.用法<router-link replace>Home</router-link>

一般情况下push用的比较多一些

编程式路由导航?

上面所用的都是用<router-link>标签进行路由跳转，那么有没有一种方式是不需要使用<router-link>标签来进行跳转呢

答案是有，我们可以使用编程式路由导航，让跳转更加灵活

//$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.具体编码：

<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

两个新的生命周期钩子 ?

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

2. 具体名字：

   1. activated路由组件被激活时触发。

   2. deactivated路由组件失活时触发。