阅读 1685

浅谈Vue-router使用方法及动态路由和嵌套路由的使用

前言

        大家好啊,有一周不见了,还是晚了一些因为这几天有事所以耽搁了。好了大家不要在意这些今天要讲的就是Vue-router,下面进入正题。

浅谈Vue-router使用方法

        下面看看Vue-router官网对它的介绍吧,Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。

        是不是很明白,说白了就是对路由的管理以及对跳转组件之间的管理,好了不能说的这么多,大家想要理解还是去看官方文档吧,今天需要讲的内用有些多,所以就不在这浪费时间了。

        下面上代码

//安装Vue-router
npm install vue-router --save
cnpm install vue-router --save
复制代码

        安装之后当然是配置Vue-router了,现在我们在src文件夹下创建一个文件夹命名为router,里面创建index.js,另外里面这样写。

//引入Vue-router文件
import Vue from 'vue'
import Router from 'vue-router'
//把Vue-router引入
Vue.use(Router)
export default new Router({
    routes: [
    
    ]
})
复制代码

        在main.js中引用Vue-router

...
import router from './router'
...
...
new Vue({
...
router
...
})
...
复制代码

        现在我们实现一个,简单的Vue-router,先新建一个homepage.vue,在index中引入

import Vue from 'vue'
import Router from 'vue-router'
//在这里引入
import homepages from '../homepage/homepage'
Vue.use(Router)
export default new Router({
    routes: [
    //这里就引入成功了
        {path:'homepages',name:'Homepages',component:homepages}
    ]
})
复制代码

        启动 npm run dev在浏览器上查看http://localhost:8080/homepages就能查看到

        下面介绍Vue-router跳转,跳转有几种方式接下来一一介绍

//第一种router-link跳转
<router-link :to="{name:'Homepages'}">首页</router-link>
//第二种router.push跳转
this.$router.push({path: '/homepages'})
//第三种返回方法
this.$router.go(-1)
复制代码

        比较基本的就是这几种跳转方式。想要看更多跳转方式请到官网去看api。

        Vue-router跳转路由

        既然讲了跳转方法那我就把嵌套路由以及嵌套路由的跳转讲讲吧

嵌套路由

        先看看官网的介绍吧,实际生活中的应用界面,通常由多层嵌套的组件组合而成,借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系。

        既然要讲嵌套路由就先把该建的vue文件建立出来,首先建立Notlogin.vue用来成放login的整体组件在index中这样写

...
import Notlogin from '../login/Notlogin'
...
export default new Router({
    routes: [
    //这样就是嵌套路由的呈现方式
         {path:'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
         
            ]
         }
    ]
})
复制代码
//Notlogin.vue
<template>
    <div>
       <router-view/>
    </div>
</template>
复制代码

        这样就引入成功,之后创建login.vue

<template>

</template>
<script>
    export default {
        name:'login',
        data:function () {
        
        }
    }
</script>    
复制代码

         在index中引入

...
import Notlogin from '../login/Notlogin'
import Login from '../login/Login'
...
export default new Router({
    routes: [
    //这样就是嵌套路由的呈现方式
         {path:'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
            {path: 'login', name: 'Login', component: Login},
         ]
         }
    ]
})
复制代码

        先说一下redirect是重新定向对跳转其他模块组建非常管用,大家可以查查怎么用的,这里就不过多阐述了。接下来创建pageshome_view.vue盛放homepages.vue形成homepages的嵌套路由

import pageshome_view from  '../pages/pageshome_view'
import homepages from '../homepage/homepage'
import Notlogin from '../login/Notlogin'
import Login from '../login/Login'
...
export default new Router({
    routes: [
        {path:'/',redirect:'/homepages',component:pageshome_view,children:[
            {path:'homepages',name:'Homepages',component:homepages},
        ]},
         {path:'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
            {path: 'login', name: 'Login', component: Login},
         ]
         }
    ]
})
复制代码

        这样就好了完成了一个嵌套路由,接下来看看跳转

//homepages.vue
<template>
    <div>
     <router-link :to="{ name: 'Login'}">登录</router-link>
    </div>
</template>   
复制代码

        这样就能跳转到login.vue了,下面讲讲动态路由传参

动态路由传参

        先看看官网怎么说的,我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。

        现在我们知道了可以通过动态路由传参,但是怎么去传参就要看,具体的方式了。先讲一个简单的方式,不讲复杂的方式,先上代码。

//homepages.vue
<template>
    <div>
     <router-link :to="{ name: 'Login',params :{ids:Logins}}">登录</router-link>
    </div>
</template> 
复制代码
//index.js
import pageshome_view from  '../pages/pageshome_view'
import homepages from '../homepage/homepage'
import Notlogin from '../login/Notlogin'
import Login from '../login/Login'
...
export default new Router({
    routes: [
        {path:'/',redirect:'/homepages',component:pageshome_view,children:[
            {path:'homepages',name:'Homepages',component:homepages},
        ]},
         {path:'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
            {path: 'login/:ids', name: 'Login', component: Login},
         ]
         }
    ]
})
复制代码

        上面可以看到/:ids这个这个东西就是我们需要传的参数。

//login.vue
<template>
    <div>
    {{logoin_size}}
    </div>
</template>
<script>
    export default {
        name:'login',
        data:function () {
            return{
            
            }
        },
        created(){
            this.logoin_size=this.$route.params.ids
        }
    }
复制代码

        我们通过params传参那么,我们就要通过params接受传过来的参数,当然params还是能带多个参数的所以不必担心。

        说了这么多,不知道大家是否理解了,写的有些匆忙还请大家不要有意见,毕竟我还有自己的事情,但是还是希望大家能批评指正我的不足之处,谢谢。