详解如何使用router-link对象方式传递参数？

疑问：（判断和传参）

点击导航栏目，js如何判断自己点击的是哪个具体栏目？
它们是如何传参的？
如何使用params，携带查询参数？

效果图解说：

A. 点击选择【屈原“查看详情”】之前

B. 点击选择【屈原“查看详情”】之后

要点总结：

在vue-router中，有两大对象被挂载到了实例this；
$route（只读、具备信息的对象）；
$router（具备功能的函数）

查询字符串：

1.去哪里 ？

<router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>

2.导航（查询字符串path不用改）

{name:'detail',path:'/detail',组件}

3.去了干嘛？获取路由参数（要注意是 query ，还是 params 和 对应的 id 名? 是后者需要注意设置相关文件的id规则）

+ this.$route.query.id

path方式：

1.去哪里 ？

<router-link :to="{name:'detail',params:{name:1}}"> xxx </router-link>

2.导航（查询字符串path不用改）

{name:'detail',path:'/detail/:name',组件}

3.去了干嘛？获取路由参数（要注意是 query ，还是 params 和 对应的 name 名? 是后者需要注意设置相关文件的id规则）

+ this.$route.params.id

相关文件代码：

1. main.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主体（页面初始化显示）
import App from './components/app.vue';
//一个个link对象 - 分类
import Detail from './components/detail.vue';
import List from './components/list.vue';
//安装插件
Vue.use(VueRouter);//挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
  //routes
  routes: [
  //一个个link对象
  {name: 'detail',path: '/detail',component: Detail},
  //此处的path规则不受list.vue中的query（匹配参数规则的）影响
  {name: 'list',path: '/list',component: List}
 ]});
/* new Vue 启动 */
new Vue({
 el: '#app',
 render: c => c(App),
 //让vue知道我们的路由规则
 router:router,//可以简写为router
})

2. app.vue文件