在vue中,一般分为路由组件和非路由组件,非路由组件是指在所有页面中共用的组件,这种组件一般不会因为url改变而发生改变,一般这种组件的文件放在compontents文件夹中,另一种是路由组件,目前前端大多为单网页应用,在切换页面时,通过路由进行实现,而不是传统的重新加载页面,这些组件一般放在pages文件夹中

配置路由的过程

首先创建pages文件夹建立几个响应的组件,然后创建router文件夹,建立index.js文件,在其中引入Vue和Vue-router,并使用Vue.use(router)安装router插件给Vue添加全局的功能。

将完成的所有路由组件导入到index.js中,export一个Vuerouter,在里面配置routes参数,以数组对象的形式添加,可以配置的属性包括path,对应的component,meta(元信息)等

最终在入口文件main.js 中引入router,注册router,使所有的组件都包含$route和$router属性

$route:获取路由信息(路径,query,params),是当前激活路由的信息
$router:是全局的router实例,用来完成编程式跳转的功能

最后需要在项目中选择router的展示出口,使用router-view来实现这一功能,这个标签会将url所对应的component展示在页面上

路由的跳转

声明式导航:router-link
编程式导航:push|replace

编程式在声明式导航的基础上,还可以完成一些其他的逻辑,比如发送信息,完成验证等,如果单纯进行跳转,使用声明式导航,有其他功能需求,使用编程式导航

<router-link to="url相对路径"></router-link>

路由元信息可以针对每个页面搭载一些不同的信息,完成特殊的功能要求,元信息应该定义在meta下面,以键值对的形式

路由传参

路由传参参数有两种
params参数:属于路径的一部分,在配置路由是需要占位
query参数:不属于路径中的一部分,不需要占位

params 必须和name参数一起用,不能和path一起用,path会完全覆盖

query可以和name或path一起使用

如果在router中添加了占位符要使用params参数,但是并没有传递参数,会导致路径有问题,在占位符之后加?代表这个参数可传可不传

params如果传递的是空串会导致路径有问题,所以在工程代码中会使用||undefined,如果前面的值是空串就

路由传参的形式:

  1. 字符串形式
    字符串手动进行拼接
  2. 模板字符串
    使用``将字符串包裹,完成字符串的拼接,变量使用${}进行包裹
  3. 对象的写法
    需要给传参的目标添加name属性

路由组件能否传递props参数

三种方法:
1.布尔值传递
在index.js 中设置props是true,就可以将params参数作为路由组件的属性传递给组件的props

2.对象模式
在index.js 中设置props参数,额外给路由组件传递参数

3.函数模式
把params和query通过props传递给路由组件

props=($route)=>{return {keyword:$route.params.keyword,k:$route.query.k}}

返回一个利用函数生成的对象