声明式导航

中的 to 传参

基本语法

  1. <router-link 
  2.              :to="name: 'xxx', params: {key: value}">
  3. valueString
  4. </router-link>

参数说明

to 前面一定要加绑定符号，后面跟的是一个对象形式的字符串
name 当前 link 要给哪个路由传递参数，name 就是接收参数的路由名字
params 要传的参数，对象形式，可以传多个值

最佳实践

(1)在 src/components/Home.vue 导航中添加参数去哪个路由，参数

  1. <router-link :to="{name: 'one', params:{username:'123'}}">value</router-link>

(2)在 src/router/index.js 中添加 路由名称，

  1. {
  2.     path: 'one', // 子页面 1
  3.   name: 'one', // 路由名称
  4.   component: One // 渲染组件
  5. }

(3)在 src/components/One.vue 添加接收参数代码

  1. <h2>{{ $route.params.username }}</h2>

URL 传参

和 to 传参类似，但 url 传参是在网址上明文传递，改变路由的值

基本语法

(1)传递参数，src/components/Home.vue

  1. <router-link to='/home/two/1/李四'></router-link>

(2)在路由中以冒号传递，src/router/index.js 中

  1. {
  2.     path:'home/two/:id/:name', //子页面 2
  3.   component：Two
  4. }

(3)接收参数，src/components/Two.vue

  1. <p>{{ $route.params.id}}</p>
  2. <p>{{ $route.params.name}}</p>

注意点

用 url 传参是，路径要写全

编程式导航

params 传递参数

关键点是
(1)src/components/Home.vue 传入参数

  1. <button @click="toThreePage">点我往页面 3 传参</button>
  2.         methods: {
  3.             toThreePage() {
  4.                 this.$router.push({
  5.                     name: 'three',
  6.                     params: {id: 1, name: 'zhangsan'}
  7.                 })
  8.             }
  9.         }

(2)src/router/index.js 代码

  1.             {
  2.                 path: 'three/:id/:name', //页面 3
  3.                 name: 'three',
  4.                 component: Three
  5.             }

(3) src/components/three.vue 接收参数

  1. <template>
  2.   <p>id:{{$route.params.id}}</p>
  3.   <p>名称:{{$route.params.name}}</p>
  4. </template>

注意点

  1. this.$router.push(
  2.   {
  3.     name: 'three',
  4.     params: {id: 1, name: 'zhangsan'
  5.     }
  6.   }
  7. )

$route 是属性，只可读
$router 是实例，有方法

query 传递参数

(1)在src/router/index.js页面加入

  1. {
  2.     path:'/home/three', // 子页面3
  3.     name: 'three',
  4.     component:Three
  5. }

(2)在src/components/Three.vue页面加入如下代码：

  1. <p>ID：{{ $route.query.id}}</p>
  2. <p>名称：{{ $route.query.name}}</p>

(3)在src/components/Home.vue中加入如下代码：

  1. // template
  2. <button @click="toThreePage">页面3-params传参</button>
  4. // script
  5. methods: {
  6.     toThreePage() {
  7.         this.$router.push({path: '/home/three', query: {id: 1, name: 'zhangsan'}})
  8.     }
  9. }

两者的区别

  1. 传参可以使用params和query两种方式。
  2. 使用params只能用name来引入路由，即push里面只能是 name:’xxxx’,不能是path:’/xxx’,this.$router.push() 方法中path不能和params一起使用params只能用name来引入路由，如果这里写成path，接收参数页面会是undefined！！！。（深坑）
  3. 使用query传参使用path/name来引入路由。
  4. params传参是路由的一部分,刷新一次页面，就获取不到参数了，改进方式必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
  5. 二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示.