vue路由导航和路由传参

---

前言

vue 路由是根据url分配到对应的处理程序；作用就是解析url，调用对应的的控制器（的方法，并传递参数）。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、路由导航的两种方法

1.声明式

代码如下（示例）：

<router-link to="/xxxx"></router>

2.编程式

代码如下（示例）：

router.push("/xxxx")

二、路由导航的两种方法的使用

1.声明式

1.声明式的常见方式

1.直接写

<router-link to="/xxxx"></router>

2.对象的方式

<router-link :to="{path:'/xxxx'}"></router>

3.通过名称的方式

<router-link :to="{name:'xxxx'}"></router-link>

1.名称的方式且传入对象

<router :to="{name:'home',params:{id:10}}"

这样子的话，地址栏显示的就是/home/10

---

**另外一个需要注意的地方**
路由中如果提供了path，params不生效

<router :to="{'path':params:{id:10}}"></router>
// 上面这行代码中的params会被忽略

2.编程式

1.编程式的常见方式

1.直接写

route.push("/xxxx");

2.对象的方式

route.push({path:"/xxxx"})

3.通过名称的方式

route.push({name:"xxxx"})

---

三、路由传参

路由传参有两种方式，分别是params方式和query方式

1.params方式

1.params方式传

这个是在前端地址栏传入参数。示例代码如下：

http://localhost:8080/#/10/20
//或者是
<route :to="'/home/' + id" ></route-link>

这个表示的是传入的第一个参数是数字10，第二个参数是参数20。
不过通过params的方式，是得要在路由文件中path中进行配置的。不进行配置的话，会报错。

配置方式代码如下：

router.js

export default new Router({
  routes: [
    { path: '/name/:id/:name', name: 'home', component: Main },
  ]
})

2.params方式接收

index.vue

<div>{{$route.params.id}}</div>
<div>{{$route.params.name}}</div>

2.query方式

1.query方式传

这种方法，相比params的方式。在路由文件中是不是进行单读配置的。

http://localhost:8080/#/home/?id=10
//或者是
<route-link :to="{path:'/home',query:{id:id}}"></route-link>

3.query方式的接收

<div>{{$route.query.id}}</div>

四.route和router的区别

• router是全局路由的实例，是vueRouter的实例。包括了路由的跳转方法，钩子函数等
• $route表示的是当前的路由信息，包括当前的URL解析得到的信息。包括当前的路径，参数，query对象等。