Vue系列-用＜router-link＞创建链接传参总结

当我们的博客框架搭好后，点击文章链接可以跳转到文章内容页面。在Vue.js中我们可以用router-link标签来完成这一操作。我们以一个博客页面做为实例，如图：

点击列表中的article2，中间区域显示对应的文章信息，同时显示对应的number：2。现在我们来实现这一功能

1. 创建router-link列表并传参

首先创建路由列表的变量：

export default {
   data(){
    return{
      routerList:[
        {'id':'1','name':'article1'},
        {'id':'2','name':'article2'},
        {'id':'3','name':'article3'},
        {'id':'4','name':'article4'},
        {'id':'5','name':'article5'},
        {'id':'6','name':'article6'}

      ],
      ...

然后在template对应位置创建router-link列表，这里我们就忽略样式，重点关注结构

 <!-- 列表区域 -->
     <div class="list-content">
        <el-divider content-position="center">推荐文章</el-divider>
       <ul style="padding-left:10px">
       	<!--循环读取routerList创建router-link标签-->
         <li v-for="item in routerList" :key="item.id" class="li-style">
         	<!--注意router-link标签中有传参：item.id-->
            <router-link :to="'/articleList/article/'+item.id">{{item.name}}</router-link>
         </li>
      </ul>
     </div>

可以看到用router-link标签设置路由时，传递了item.id这个参数，因此在定义路由时需要把参数的占位符定义出来，如下

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    children:[
      { path:'/welcome',component:Welcome },
      { path:'/articleList',
        component:ArticleList,
        children:[
          //注意这里在路由后加上了/:id占位  相当于"'/articleList/article/'+item.id"
          //对应的组件为Article,需要接收传递的id
          { path:'/articleList/article/:id',name:'Article',component:Article},
      ]
      }, 

可以看到定义path时，’/articleList/article/:id’，应该将’/:id’的位置留好。

2. 组件中接收参数

Article组件中接收参数用**$route**

<template>
  <div>
    <h1>This is my article</h1>
     numer :{{$route.params.id}}
  </div>
</template>

3. 对象“$route”与“$router”区别

这里有一个疑问，就是定义路由时我们用的是router，而这里链接跳转用的是route，两者有什么区别，我们在应用中分别打印两个对象，看看里面到底是什么

route

  mounted(){
      console.log("*******************")
      console.log(this.$route)
      console.log("===================")
      console.log(this.$router)
  }

横线上方是route对象，下方是router对象

route为"局部路由"，特点：
* 存储正在跳转的路由信息
* 用params与query接收参数

router存储的是"全局路由"，里面含有很多属性和子对象，例如history对象。

4. 路由跳转传参总结

4.1 手动传参

页面html定义：

 <el-Button @click="query">手动传参query</el-Button>
 <el-Button @click="params">手动传参params</el-Button>

对应method（注意用的是router对象）：

  methods:{
     query(){
         this.$router.push({name:'Article',query: {id:'88'}})
     },
     params(){
         this.$router.push({name:'Article',params: {id:'99'}})
     }

  }

接收参数（注意用的是route对象)

	//parms接收参数
  {{$route.params.id}}
	//query接收参数
	{{$route.query.id}}
  </div>

4.2 router-link传参

<!--params传递参数-->
 <router-link :to="{name:'Article', params: {id:22}}">router-link传参，params</router-link>
<!--query传递参数-->
 <router-link :to="{name:'Article', query: {id:33}}">router-link传参，query</router-link>

接收参数：

	//parms接收参数
  	{{$route.params.id}}
	//query接收参数
	{{$route.query.id}}
 

4.3 this.$router.replace() (用法同4.1)

主要区别：

this.$router.push：
//跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace：
//跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

4.4 this.$router.go(n)

向前或向后跳转n个页面,n为正整数或负整数