vue路由传参params

占位符用冒号传参，router.js如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About'
import Home from '../views/Home'
import News from '../views/News'
import Message from '../views/Message'
import MessageDetail from '../views/MessageDetail'

Vue.use(VueRouter);
export default new VueRouter({
 linkActiveClass:'active',//路由跳转时动态添加样式

  routes:[
    {
      path:'/',
      name:'主页面',
      redirect:'/about'
    },
    {
      path:'/about',
      name:'关于',
      component:About
    },
    {
      path:'/home',
      name:'主页',
      component:Home,
      children:[/*嵌套路由*/
        {
          path:'message',/*根路径开始*/
          component:Message,
          children:[
            {
              path:'detail/:id',/*占位符用冒号*/
              component:MessageDetail

            }
          ]
        },
        {
          path:'news',/*相对路径*/
          component:News,
        },
        {
          path:'',/*父路径默认显示的子路径页面*/
          redirect:'news'
        }
      ]
    },

  ]

})

页面传参用${},接收参数用$route.params.xx

 <li v-for="(obj,index) in msgarr" :key="obj.id">
      <router-link :to="`/home/message/detail/${obj.id}`">{{obj.msg}}</router-link><!--es6传参方式${}同时需要用`来包裹-->

    </li>
<router-view></router-view>

接收参数需要用watch来监视$route

<template>
<div>

  <ul>
    <li>id:{{$route.params.id}}<!--$route.params来获取路由传过来的参数--></li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
</template>

<script>
    export default {
        name: "MessageDetail",
      mounted() {
          var id=this.$route.params.id;
          console.log(id)
      },
      watch:{
          $route:function(value){
            console.log(value.params.id)
          }
      }

    }
</script>

<style scoped>

</style>