Vuejs动态路由设置

通常Vuejs项目中,会通过Vue-Router实现动态路由功能,比如一个网站有很多篇文章,所有文章通常布局样式和交互都是一样的,也就是说所有的文章可以共享同一个vue组件,不过每一篇文章都有一个唯一的URL和各自的特定数据,这时候可以把共享同一个Vue组件的网站文章对应的URL归为一类,然后这一类URL地址使用Vue-Router的动态路由统一表示。

在下面的讲述之前,先假设有tag.vue和article.vue两个组件,article.vue是所有文章共享的vue组件,tag.vue组件批量生成了每一篇文章的URL地址。

从后端数据库请求所有文章的数据,然后通过文章的标题和id信息批量创建<router-link>,<router-link>可以理解为一个超链接a元素。:to="article._id"相当于设置了每一篇文章的URL,前端可以通过article._id向后端请求某篇文章的具体数据。

    <div v-for="article in articleArr" >
       <router-link :to="article._id" :key="article._id">
        <!-- article.title表示文章标题 -->
        {{ article.title}}
      </router-link>
    </div>

2. 路由文件\src\router\index.js设置

所有:to属性值符合path: '/:id',规则的<router-link>,点击的时候都会自动调用调用文章组件article.vue。

//引入文章组件article.vue
import article from '@/components/article'
export default new Router({
  routes: [
     ...
    {
      //:id是一个动态路由参数,对应所有的文章,一个具体的id对应后端数据库中一条文章的数据
      path: '/:id',
      name: 'article',
      component: article
    },
  ]
})

3. 文章组件article.vue设置

通过this.$route.params.id获得<router-link>对应的具体文章的id,然后通过文章的id向后端请求文章数据.

  created: function() {
    //更新视图对应的数据
    this.init(this.$route.params.id)
  },

如果tag.vue组件不存在

如果你把tag.vue中代码移植到article组件中,没有tag.vue组件,所有文章标题坐标文章的侧边栏存在,要注意监测路由变化,及时更新视图数据,以免发生动态路由参数发生变化,试图不更新的现象。

可以在article.vue组件中设置如下代码。

  watch: {
    '$route'(to, from) {
      this.init(this.$route.params.id)
    }
  },