成都网站建设设计

将想法与焦点和您一起共享

一文带你读懂vue路由-创新互联

本篇文章给大家分享的是有关一文带你读懂vue路由,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

创新互联专注于企业全网营销推广、网站重做改版、华龙网站定制设计、自适应品牌网站建设、H5建站商城网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为华龙等各大城市提供网站开发制作服务。

前端路由和后端路由:

  • 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源
  • 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现
     

在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由

路由的使用

1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函数VueRouter

2.在new路由对象的时候可以传递一个配置对象,这个配置对象的route表示路由器的匹配规则

3.每个路由规则都是一个对象,这个规则对象身上必须有两个属性

  • 属性1 path表示监听哪个路由链接地址
  • 属性2 component,表示如果路由是前面匹配到的path,则展示component属性对应的组件,component属性值必须是一个组件模板对象,不能是组件的引用名称
var login={
      template:'

登录

' } var register={ template:'

注册

' } var routerObj=new VueRouter({ routes:[ {path:'/login',component:login}, {path:'/register',component:register} ] })

本文标题:一文带你读懂vue路由-创新互联
URL地址:http://chengdu.cdxwcx.cn/article/cccsjh.html