vue中的路由

一.准备工作

1路由的安装:

使用路由需要安装

在main.js中引入

(为了减轻负担将以下代码放到路由配置文件里)

  视图出口(一级页面在根组件App.vue中配置[上一级直接父级组件里配置])

以上是怎么引入路由的原生方法

但我们可以使用更简便的方法: 在创建vue项目时直接选择有路由的模块下载

下载之后会在src文件夹下自动生成一个router文件夹, 里面的index.js就是当前的配置文件

如图: 子组件的导入方法:

二级页面的显示( 需要在一级页面中配置出口视图)

二.路由之间的跳转

路由导航分为两种:

1 声明式导航 使用 router-link 标签 to="要跳转到的页面路由"

2 编程式导航 使用js 绑定事件进行跳转

push 返回上一级(使用频率高)

replace 不能返回上一级

go方法 :this.$router.go(-1) 里面的值是-1就返回上一级 是1就前进一级

可以用路由命名直接跳转

.......

三. 路由传参

1 search传参 在url地址上使用 ? & 形式进行数据传递

#/路由?id=XXX&name=XXX

在跳转的页面接参(mounted)

2 动态路由传参

修改路由规则在路由配置文件里(修改之后如果传参不全会地址错误)

在router-link 标签里的to属性中拼写完整路由

或者设置函数来push地址(不修改路由)

也可以这样写:

用this.$route.params.xxx接参

四.使用meta(元信息)传给组件值

先在路由规则里配置要传递的数据

然后在页面里的全局组件中利用$route.meta.属性拿到数据