vue-router路由简单案例介绍
|
官方文档： 旧版：https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版：http://router.vuejs.org/（2.0版本） 此文是旧版 文件结构图：
基本用法： 例如：我的应用入口是app.vue 那么在app.vue中添加如下代码， 此处涉及ES6。 app.vue Footer是一个公用的页脚组件，存放于components文件夹中 footer.vue 由于app.vue是最顶级的入口文件，在app.vue中引用footer组件的话，所有页面都会包含footer内容，但是二级页面等子页面不需要，所以得把app.vue中代码复制到index.vue中，把app.vue中footer相关的部分删掉。 在index.html中添加如下代码，创建一个路由实例。 在main.js中配置route.map main.js router.start中的'app'，指的是index中的：，可以取其他的名字，但是得和index中的名字一致。 这时启动项目（npm run dev）会发现，页面上只有footer，而没有显示其他内容。因为index.vue本来就只有footer而没有其他内容，但是我们肯定要显示页面，就要用到 router.redirect(redirectMap)重定向 例如：我们要默认载入home页面 在main.js中加入 在index中加入init()函数
export default{
components:{
Footers
},init(){
var router = new Router()
router.go('/home');//跳转到home组件
}
}
然而，经过测试，redirect并没有重定向的home，载入home的真正原因是：router.go('/home') 此时，进入项目就会显示home页面的内容了。
路由规则和路由匹配Vue-router 做路径匹配时支持动态片段、全匹配片段以及查询参数（片段指的是 URL 中的一部分）。对于解析过的路由，这些信息都可以通过路由上下文对象（从现在起，我们会称其为路由对象）访问。 在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。 $route.path字符串，等于当前路由对象的路径，会被解析为绝对路径，例如：/list，来源于route.map中配置的路径 dom中 或者（具名路径） 带参数跳转（例如：从列表页跳转到列表详情页）script。
export default{
data(){
return{
alllist:[]
}
},route:{
data({to}){
return Promise.all([
//获取数据
this.$http.get('http://192.168.0.1/knowledge/list',{'websiteId':2,'pageSize':5,'pageNo':1,'isTop':1})
]).then(function(data){
return{
//将获取到的数据复制给allllist数组
alllist:data[0].data.knowledgeList
}
},function(error){
//error
})
}
}
}
详情页代码 {{listDetail.title}}
阅读：{{listDetail.viewTimes}}发布时间: {{listDetail.publishTime | timer}}
{{{listDetail.content}}}
此时router要做下修改 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
