vueJs(2.x)+router+vuex简易博客系统<五>
来源:互联网 发布:nba数据查询器stat 编辑:程序博客网 时间:2024/06/16 19:33
上一篇文章简单介绍了下vue的基本语法,其实入门还是非常简单,回到项目中,我们把界面已经全部都写好了,在github中可以下载:https://github.com/shiyou00/blog_vue 可以对着项目看看,这章主要结合项目讲解下路由的知识
项目中有两个界面:
page/home/index.vue 这个是博客首页
page/home/content.vue 这个是博客的内容页
我们的请求接口是这样的:
1、进入首页请求所有文章,然后渲染成列表。
2、文章列表跳转到文章详情页时,传递参数id到文章详情页,然后在详情页通过id请求后台数据接口获取相应的文章信息。
这里就使用了路由知识,有几个问题,我们来解决下?
1、配置首页和详情页路由
2、路由是如何进行跳转
3、vue组件是如何接受参数的
配置界面路由
router/index.js中
import Vue from 'vue'import Router from 'vue-router'import homeIndex from '../page/home/index'import contentView from '../page/home/content'Vue.use(Router)export default new Router({ routes: [ { path: '/index.html', name: 'homeIndex', component: homeIndex }, { path: '/content/:id', name: 'contentView', component: contentView, props: true } ]})
path:访问路径
name:给组件定义一个名字
component:引入的组件(import)
路由的跳转
配置好了之后,然后在界面中这样访问:
<!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/index.html">Go to index</router-link> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view>
在实际开发中的首页会这样定义
{ path: '/', name: 'homeIndex', component: homeIndex }
app入口组件中添加
<template> <div id="app"> <router-view/> </div></template>
这样项目启动直接输入http://localhost:8089(本项目中使用的) , 就可以访问到首页了。
路由带参数跳转
{ path: '/content/:id', //这里配置动态参数id name: 'contentView', component: contentView, props: true }
这是组件中,需要跳转的组件
<router-link v-bind:to="{name:'contentView',params:{id:article.id}}">
name:跳转的组件名称
params:id的动态值
props:true 的跳转到 了contentView组件后,在该组件中要获取参数id是通过props中获取,当然还可以通过$route的方式获取,这里就不讲解了,可以通过官方文档去学习。
组件中通过props中接收参数(content.vue文件)
export default{ name:"contentView", props:['id'], //通过这里去接收路由传递过来的参数 components:{ moduleNav,leftSide,moduleNotice,footerModule }, created(){ this.contentData(this.id); //这个方法就是把传递过来的参数调用api去请求响应的文章信息,这个是通过vuex状态管理来实现的,现在不需要理会,只需要知道,获取到该参数值,并且通过id去请求到相应的文章数据 }, methods: { ...mapActions([ 'contentData' ]) } }
总结下:通过这篇文章我们学习到了配置路由,路由带参数跳转,已经组件接受参数值等操作,当然路由还有一些内容,包括:”嵌套路由”,”编程时路由导航”,”路由重定向”,等等更多路由参数,不过个人还是建议有空可以通读下api文档,然后实际需要用的时候再去查询使用。
- vueJs(2.x)+router+vuex简易博客系统<五>
- vueJs(2.x)+router+vuex简易博客系统<一>
- vueJs(2.x)+router+vuex简易博客系统<二>
- vueJs(2.x)+router+vuex简易博客系统<三>
- vueJs(2.x)+router+vuex简易博客系统<四>
- vueJs(2.x)+router+vuex简易博客系统<七> 整合vuex
- vueJs(2.x)+router+vuex简易博客系统<六> 整合axios
- vue2+vuex+vue-router 快速入门(五) vuex 介绍
- Vue+Vuex+Router
- vuejs组件状态管理Vuex
- vuejs国际化插件vuex-i18n
- Vuejs全家桶系列 --- Vuex
- vue1x、vue-router 0.7x 迁移到 vue2 vue-router2 vueX的坑
- vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
- vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
- vue+vuex+router初体验
- vuejs router路由的使用
- 使用 vue2+Vuex+Router 重写饿了么点餐系统和 vue 插件简析
- 桃李春风一杯酒,江湖夜雨十年灯
- Retroifit源码解析
- 【IPFS + 区块链 系列】 入门篇
- ASP.NET Web Forms
- mysql的一些语法与Oracle的差别
- vueJs(2.x)+router+vuex简易博客系统<五>
- 基于Ethereum & IPFS的去中心化Ebay区块链项目开发实战
- ASP.NET Web Forms
- ASP.NET Web Forms
- 记录一段使用socket 回复的http json的请求代码
- 流读取硬盘图片展示到web页面
- Spark(Accumulator)陷阱及解决办法
- Could not autowire. No beans of 'UserMapper' type found.
- ASP.NET Web Forms