希望的效果如下:

• 2个路由: 点击如下
  
  

步骤.

• 使用 router-link 来指定路由路径
• 在router.js中指定 路径的 事件处理函数(对应的组件)
• 创建对应的组件

router-link

• 找到一个区别各个列表的属性(id),将其作为参数传递到路由中
• to是vue-router中用来绑定路由的属性
• 由于需要进行计算(path + id),故需要将to改为 :to

// NewsList.vue
<router-link :to=" '/home/newsinfo/' + item.id "><img class="mui-media-object mui-pull-left" :src="item.img_url"><div class="mui-media-body"><h1> {{ item.title }} </h1><p class="mui-ellipsis"><span>发表时间: {{ item.add_time | dateFormat }} </span><span>点击: {{ item.check }} 次</span></p></div>
</router-link>

路由对应组件

• 使用 :id 来获取 “http://localhost:5500/#/home/newsinfo/13” 中的最后一个参数,属性名为 id
• 使用 :id 绑定后,即可在 $route的params中获取 id 属性了.

// router
// 导入 vue-router
import  VueRouter from 'vue-router'
// 导入相应的组件
import NewsInfo from './lib/components/news/NewsInfo.vue'var router = new VueRouter({routes:[{ path: '/', redirect: '/home' },    // 重定向{ path: '/home/newsinfo/:id', component: NewsInfo }],linkActiveClass:'mui-active'    // 路由激活时的样式
})

创建组件(NewsInfo.vue)

• url信息绑定在Vue实例的 $route上
• created：是Vue生命周期中最早可以使用data和方法的函数
• 可以通过打印 this.$route 将路由信息输出到控制台
  
• 可以看见,传递的id信息在 this.$route.params.id 上
• 在tempate中会默认指向this, 因此 在里面使用时需要去掉this.而直接使用 {{ $route.params.id }}

// NewsInfo.vue
<template><div><h3>新闻详情 ---  {{ $route.params.id }} </h3></div>
</template>
<script>
export default{data() {return {}},
}
</script>
<style lang="scss" scoped>
</style>