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

前言

大家好啊，有一周不见了，还是晚了一些因为这几天有事所以耽搁了。好了大家不要在意这些今天要讲的就是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还是能带多个参数的所以不必担心。

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