vue-router路由的示例分析
这篇文章将为大家详细讲解有关vue-router路由的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联建站是专业的网站建设公司,提供网站建设,网站制作,网站设计等网站开发一体化解决方案;包括H5响应式网站,小程序设计,网站定制,企业网站建设,商城网站建设,响应式网站建设,建网站,PHP网站建设,软件开发,软文发布平台,网站营销。欢迎做网站的企业前来合作洽谈,创新互联建站将竭诚为您服务!
官方文档:
旧版: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
import Vue from 'vue' import VueRouter from 'vue-router'//导入vue-router //导入组件 import App from './App' import Index from './page/index' import list from './page/list' import Home from './page/home' import Account from './page/account' Vue.use(VueRouter) var router = new VueRouter() router.map({ //默认指向index '/':{ name:'index', component:Index, //子路由(有页底) subRoutes:{ '/home':{ name:'home', component:Home }, '/account':{ name:'account', component:Account } } }, //没有footer '/list':{ name:'list', component:list } }) //启动一个启用了路由的应用 router.start(App,'app')
router.start中的'app',指的是index中的:
这时启动项目(npm run dev)会发现,页面上只有footer,而没有显示其他内容。因为index.vue本来就只有footer而没有其他内容,但是我们肯定要显示页面,就要用到
router.redirect(redirectMap)重定向
例如:我们要默认载入home页面
在main.js中加入
//重定向到home router.redirect({ '*':'home' }) router.start(App,'app')
在index中加入init()函数
然而,经过测试,redirect并没有重定向的home,载入home的真正原因是:router.go('/home')
此时,进入项目就会显示home页面的内容了。
路由规则和路由匹配
Vue-router 做路径匹配时支持动态片段、全匹配片段以及查询参数(片段指的是 URL 中的一部分)。对于解析过的路由,这些信息都可以通过路由上下文对象(从现在起,我们会称其为路由对象)访问。 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新。
$route.path
字符串,等于当前路由对象的路径,会被解析为绝对路径,例如:/list,来源于route.map中配置的路径
router.map({ '/home':{ name:'list', component:Home } })
dom中
前往list列表页面
或者(具名路径)
前往list列表页面
带参数跳转(例如:从列表页跳转到列表详情页)
script。
详情页代码
{{listDetail.title}}
阅读:{{listDetail.viewTimes}}发布时间: {{listDetail.publishTime | timer}}
{{{listDetail.content}}}
此时router要做下修改
'/list':{ name:'list', component:GetReceipt }, '/listDetail/:id':{ name:'listDetail', component:GetReceiptDetail }
关于“vue-router路由的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
名称栏目:vue-router路由的示例分析
当前地址:http://scyanting.com/article/ihepps.html