Vue中动态路由

(1)在router.js 中配置动态路由,注意:路径path后面加id就是动态添加值

路由:注意 :id 是个动态值

    {
      path: '/questions/:id',
      name: 'questions',
      component: Questions
    }

引入该路由:

//下面引入动态路由
import Questions from './components/Questions.vue'

(2)该路由在哪里使用?在Academic.vue组件中,尤其注意router-link标签中  :to 属性的写法,内部的 params属性是个对象





(3)当点击这些动态路由时,根据id值,跳转到对应的页面(该页面是由同一个组件Questions.vue,该页面的布局基本上唯一)

如何根据id值加载对应的页面内容呢?来到Questions组件,我们通过生命周期函数created 来打印this,看看this是什么结果,有没有我们需要的关于路由的值。





有个$router属性,是和路由相关的
Vue中动态路由_第1张图片

Vue中动态路由_第2张图片

那么我们就可以通过id值,从网络请求获取对应数据,对数据进行处理。

 

 

你可能感兴趣的:(Vue,router,Vue)