Vue路由

Vue路由

什么是Vue路由?

  • 后端路由:即请求的URL地址都对应后端的接口,请求URL响应对应的服务器的资源。

  • 前段路由:对于单页面程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以单页面程序中的页面跳转主要通过hash实现。

入门

导入类库

首先需要导入vue-router组件类库:

>

当导入类库后,window全局对象中就存在了一个路由的构造函数: VueRouter;就像导入Vue类库后存在一个Vue的构造函数一样,我们能够通过new VueRouter的方式实例化路由对象。

如果你使用了new VueRouter({});构造函数来实例化了一个路由对象,你会发现浏览器路径中会出现#/路径,这个路径就是前面讲到的URL中的hash,他并不会向后端发送任何请求,而仅仅是作页面跳转,如果你#/后拼接了一个不存在的路径,自然也不会进行跳转,页面也不会发送任何请求。

实例:

Vue路由_第1张图片
1.png

Vue路由_第2张图片
2.png

基本使用

上面我们讲到了使用new VueRouter({})的方式实例化一个路由对象,其中包含几个参数:


//创建login组件 var login = { template: 'login组件' } //创建register组件 var register = { template: 'register组件' } // Router实例 var 路由对象名称 = new VueRouter({ routes: [ { path: '/监听URL路径', component: login(组件名称) }, { path: '/监听URL路径', component: register(组件名称) } ] }); // Vue实例 var vm = new Vue({ el: 'app', data: {}, methods: {}, router: 路由对象名称 });

解释:

  • 1、routes 表示这个路由对象中的 路由匹配规则,可以存在多个规则(注意:这里是routes而不是routers

  • 2、属性一:path 表示监听哪个路由连接地址,即你想跳转都哪个路径上,应在这里注册实现跳转到对应的组件上

  • 3、属性二:component 表示如果路由匹配了前面的path,则展示component属性对应的那个组件

  • 4、component的属性值必须是一个组件的模板对象,不能是组件的引用名称

  • 5、经过1-4的步骤基本完成了路由对象的创建,下面要将这个路由对象注入到Vue实例中,使用router: 组件对象名称实现

  • 6、创建对应需要监听的组件,如上我们创建了loginregister组件,与之前讲的不同是这里是一个var 组件名称其值是一个组件对象,和之前的Vue.component方式相似,但是这里仅仅是一个组件对象,并没有注册到Vue实例中,因为没有组件名称,所以不能在HTML中使用 ,注意这里的login是组件对象的名称。

步骤:

  • 1、创建router实例new VueRouter,完成相关属性的定义;

  • 2、将这个路由对象注册到Vue实例中,使用router: 路由对象名称的方式;

  • 3、创建第一步中定义的组件名称对应的组件,直接在

    但是上面的实例中,我们发现默认进入的根路径中仅有一个父组件名称,一般我们的登录页面应该直接显示登录框,所以vue-router提供了重定向的动能{path: '', redirect: ''},即在router: []中监听根路径,如果监听都访问的是根路径就重定向到登录URL就好了。

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

    路由参数传递

    在进行页面跳转,即路由的时候,我们可能需要在发送URL时传递一些参数,常见的就如http://tycoding.cn/api?id=1&name='涂陌'这种格式。

    那么在URL中传递的参数,vue-router提供了一种获取方式:this.$route

    那么什么时候能获取到传递的参数呢? 回顾前面讲到的Vue声明周期函数,那么在自定义组件中自然也存在生命周期函数,所以最早操作组件datamethods中数据的阶段就是created这个声明周期函数的阶段。

    实例:

    Vue路由_第3张图片
    3.png

    Vue路由_第4张图片
    4.png

    上面打印的值中,我们能看到,我们再VueRouter中创建的path匹配规则,实际在HTML中会被渲染为相关的正则表达式,来实现路径的匹配。
    其次,我们还能发现,在URL中拼接的参数idthis.$route对象的query属性中,我们通过this.$route.query.id即可获得传递的id值:2

    路由嵌套

    路由嵌套,顾名思义即在父级路由内部存在子路由。例如:

    根路径:http://tycoding.cn/
    父级路由地址:http://tycoding.cn/api
    子级路由地址:http://tycoding.cn/api/login

    实例:

    
    
    
        
        
    
    
        
    Account

    如上,我们使用了routes: []中的另外一个属性:children,顾名思义就是表示这个父规则/account下存在一些子规则,且在URL中应该体现出来:

    Vue路由_第5张图片
    5.png

    注意:

    children中定义的子组件的path规则不能加/,即如上的,直接写path: login即可,这样请求account/login地址时,vue-router会找/account规则下的login规则,且不加/vue-router才会自动将login视为account下的子路径,并自动拼接account/,否则不会自动拼接,那么也无法完成路由的嵌套。

    命名视图

    我们常见的后台开发页面,经常遇到上、左、中的布局方式;那么以前我们可能使用iframe实现页面间的跳转,但是现在我们学习的路由要比其更加的方便好用。

    命名视图的思想就是为每一个页面展示的视图都起一个名字,目的是为了为每个容器刚好匹配一个指定的视图。使用方式:

    
    
    
    
    routes: [
        { 
            path: '/', components: {
                'default': header
                'left': left
                'main': main
            }
        }
    ]
    

    解释:

    其中的path是根路径/,而使用components代替之前的component,目的就是可匹配其下的多个规则;default表示默认的视图组件是header这个组件,即会匹配到第一个视图容器中;下面的两个组件会根据name名称需要对应的组件。

    实现上、左、中的布局:

    思路:

    1、我们需要创建三个组件,名称分别为:headerleftmain;并且在app中创建三个路由容器。

    2、采用命名视图的方式为每个视图都起一个名字: ...

    3、注册路由实例。

    实例:

    Vue路由_第6张图片
    6.png
    Vue路由_第7张图片
    7.png


    交流

    如果大家有兴趣,欢迎大家加入我的Java交流群:671017003 ,一起交流学习Java技术。博主目前一直在自学JAVA中,技术有限,如果可以,会尽力给大家提供一些帮助,或是一些学习方法,当然群里的大佬都会积极给新手答疑的。所以,别犹豫,快来加入我们吧!


    联系

    If you have some questions after you see this article, you can contact me or you can find some info by clicking these links.

    • Blog@TyCoding's blog
    • GitHub@TyCoding
    • ZhiHu@TyCoding

你可能感兴趣的:(Vue路由)