声明式导航-跳转传参

---

只要提到了声明式导航，就得想到（router-link）

---

1. 查询参数传参

语法：

1. to="path?参数名=值"
2. 对应页面组件接收传递过来的值： $route.query.参数名

---

代码示例：

1. 在路由跳转的时候进行传值   
<router-link to="/search?key=注重过程">注重过程</router-link><router-link to="/search?key=不要急躁">不要急躁</router-link><router-link to="/search?key=怎么学习好Vue呢">怎么学习好Vue呢</router-link>2. 对应页面组件接收传递过来的值： <p>搜索关键字: {{$route.query.key}} </p>发请求的时候一定要使用this （获取路由传递过来的参数）created () {// 在created中，获取路由参数// this.$route.query.参数名   获取console.log(this.$route.query.key)}

---

2. 动态路由传参

① 配置动态路由：

const router = new VueRouter({routes: [...,{path: 'search/:words',component: Search}]
})

②配置导航链接: to="/path/参数名"

      <router-link to="/search/注重过程">注重过程</router-link><router-link to="/search/不要急躁">不要急躁</router-link><router-link to="/search/怎么学习好Vue呢">怎么学习好Vue呢</router-link>

③对应页面组件接收传递过来的值：$route.params.参数名

    <p>搜索关键字: {{$route.params.words}} </p>created () {// 在created中，获取路由参数// this.$route.query.参数名   获取查询参数// this $route.params.参数名  获取动态路由参数console.log(this.$route.params.words)}

---

两种传参的区别

1. 查询参数传参（比较适合传多个参数）
   • ① 跳转： to=“/path?参数名=值&参数名2=值”
   • ② 获取：$route.query.参数名

---

2. 动态路由传参（优雅简洁，传单个参数比较方便）

• ① 配置动态路由： path：“path/:参数名”
• ② 跳转：to=“/path/参数值”
• ③ 获取：$route.params.参数名

---

动态路由参数可选符

---

问题：我们再配了路由 path: “/search/:words” 为什么会匹配不到组件呢，显示空白？

---

原因：/search/:words 表示，必须要传参数。如果不传递参数，由于是动态的传参，所以还是会进行匹配，可以加个可选符号?

---

const router = new VueRouter({routes: [...,{//在参数名后面添加一个？即可解决跳转空白path: 'search/:words?',component: Search}]
})