vue的插件vue-router

1.vue-router的概念

路由：一个路由就是一组映射关系(key-value),key为路径，如：/user。value可能为function或component。前端路由value就是component，用于展示页面内容，后端路由的value为function，node.js中的value即为function

vue的一个插件库，专门用于实现SPA单页面应用

单页面应用：整个页面只有一个index.html页面，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据要通过ajax请求获取

用router-link来导航时to要写完整路径如to=”/about/new"，一级路由需要加"/“如：‘/about’，二级以上的路由不用如：children:[{path:'new',Component:New,}]

2vue-router的配置

1.命名路由

可由name属性设置路由的名称作为标识

1.query参数原始写法：‘?key1=value1&key2:value2'

<router-link :to{
name:"about",//可以简化path:"/about/new"路由跳转的操作
query:{
id:001,
content:'1wqws",
}
}"
</router-link>

2.params参数

原始写法：'/about/param1'

此时需要在路由中的path下配置"/about/:id/:detail",":"为占位符

<router-link to="`/about/${param}`"

如果用to去配置对象时即:to={}，此时跳转时只能用name属性,不能用path

3.props配置(在路由中的配置）

第一种写法：props:{a:1,b:2}所有的key-value都会以props的形式传递给组件，而在传递的组件中用props:['a','b']来接收

第二种写法：props:true,若props的值为布尔值，且布尔值为真，就会把该路由的params参数，以props的形式传给组件，而在传递的组件中用props:['a','b']来接收

第三种写法：值为函数

props($router){
return {
id:$router.query.id,
title:$router.query.title
}
}

在传递的组件中用props:['id','title']来接收