vue路由传参

在vue中使用插件的步骤

1、引入Vue

2、引入插件

3、使用插件 Vue.use()

当路由配置成功以后Vue中就会多了两个内置组件

<router-view></router-view> //当路径匹配成功以后 router-view用来显示相对应的组件 <router-link></router-link>

1、做路由的跳转 必须要添加一个属性 to:跳转的路径

  2、除此之外 router-link 身上还会有一个tag属性 指定router-link 渲染成指定的标签

 路由的配置

mode:路由的形式 hash路由 history路由

routes:[] 每一个路由页面的配置项 routes中的配置项

path:"路径匹配的路径"

component:当路径匹配成功需要渲染的组件

redirect：重定向

children:路由嵌套的配置项 这个属性和routes一样

路由嵌套中path只需要写路径的名称即可 name:当前路由的名称 props:

路由解耦 路由传值的方式

1、动态路由 流程 1、在定义路由的时候设置传递数据的key值 path:"/路由地址/:key1/:key2" key1 key2代表的数据的键值

　　　　eg: path："path:/login/:id"

2、在做路由跳转的时候定义传递的数据 to="/路由地址/参数1/参数2"

　　　　eg:<router-link to="/login/:12"><router-link>

 

3、在需要接受信息的组件内部通过this.$route.params进行接收

this.$router.params.id

 

2、query传值 流程：

1、通过query的方式进行数据的传参 key=val&key=val

简写："name:路由地址，query:{id: ,name:}" 所谓的query传值其实就是我们常说的get传值的方式 通过？后面进行拼接

  eg:<router-link :to=“{name:"login",query:{sid:sid}”></router-link>

 

2、接收的时候通过this.$route.query进行接收

3、路由解耦(只适合动态路由传值)

1、在定义路由的时候添加一个属性props:true

2、接收的时候只需要通过props进行接收即可 query传值 和 params 传值的区别？ 前者的参数可传可不传 后者的参数是必须要传递的 编程式导航 路由跳转的方式

1、a标签跳转 影院

2、组件 router-link

3、编程式导航 通过js进行路由的跳转 this.$router.push 跳转 this.$router.back 后退 this.$router.forward 前进 this.$router.replace 替换