Vue 动态路由

朴灿烈づ我的快乐病毒、 2022-12-22 15:24 180阅读 0赞

## News.vue ##

## Details.vue ##

<template>
      <div>
        <h2>Details：{
       {this.$route.params}}</h2>
      </div>
    </template>
    
    <script> export default { mounted () { console.log(this.$route.params) // 获取动态路由传值 } } </script>

## 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

## 效果 ##

*  默认页面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]
 *  单击后的页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/05c2520b38fa454da4083a518e3fc72d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/ccc4c104993c4093b24181b2a586a778.png