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

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

前端路由和后端路由：

• 后端路由：对于普通的网站，所有的超链接都是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}

      ]
    })