Vue 动态路由

News.vue

  
    News
    
    aaaa
    
    bbbb
  

Details.vue

  
    Details：{{this.$route.params}}
  



  export default {
    mounted () {
      console.log(this.$route.params) // 获取动态路由传值
    }
  }

router目录下的index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'

import News from '../views/News'

// 将Vue挂载到Router中，接下来就可以使用Router了
Vue.use(VueRouter)

const routes = [{
  path: '/news',
  component: News
}, {
  path: '/details/:nid', // 动态路由
  component: () => import('../views/Details') // 懒加载
}, {
  path: '*',
  redirect: '/news'
}
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

效果

• 默认页面

• 单击后的页面