第三十二节:Vue路由: Vue-router基本配置与使用

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌.


1. Vue路由的安装和配置

1.1 安装vue路由
 npm install vue-router --save-dev


2.2 配置vue路由
// 1. 导入路由并使用
import Vue from 'vue' // 导入vuerouter 
import VueRouter from 'vue-router';  

// 使用功能VueRouter插件
Vue.use(VueRouter)  

//  2. 创建路由实例,并配置路由映射
//  2.1 创建路径与组件的映射关系
let routes = [         
    {             
        path:'/home',             
        component: Home         
    },        
    {             
        path:'/list',             
        component: List         
    },
    {             
        path:'/about',             
        component: About         
    }
] 

//  2.2 创建路由实例
var router = new VueRouter({     // 配置路由     
    routes,
}) 

// 3. 将配置好的路由在Vue实例中使用 
new Vue({     
    el:'#app',     
    router 
})


2. 路由的基本概念

路由中有三个基本的概念route,routes,router.

  1. route, 它是一条路由,就是一个路径和组件的映射关系

    // route 
{     
    path:'/',         
    component: Home
}


  2. routes 是一组路由，把每条route的路由组合起来，形成一个数组。

    routes:[     
    {         
        path:'/',         
        component: Home     
    },     
    {         
        path:'/list',         
        component: List     
    } 
]


  3. router 是一个路由机制，相当于一个管理者，他来管理路由。因为routes只是定义了一组路由，也就是一组路径和组件的对应关系,当用户点击了按钮,改变一个路径,router会更加路径处理不同组件

    var router = new VueRouter({     
    // 配置路由     
    routes:[...] 
})


3. 路由的基本使用

3.1 内置的两个组件

router-link组件说明:

  1. router-link是vue-router已经注册好的组件,直接使用就可以了
  2. router-link是用来切换路由的,通过to属性来跳转到指定的路由
  3. router-link在编译的时候会自动被编译为a标签,可以使用tag属性指定编译为你要的标签


router-view组件说明:

  1. router-view用来指定当前路由所映射的组件显示的位置
  2. router-view可以理解为占位符,为路由映射的组件占位,不同路由映射的组件通过替换显示
  3. 和动态组件的效果类似


使用展示:

 <!-- 导航-点击跳转 --> 
<!-- to属性类似与a标签的href --> 
<router-link to="/home">首页</router-view> 
<router-link to="/list">列表</router-view>  
<router-link to="/about">关于作者</router-view>  

<!-- 展示路由组件 --> 
<router-view></router-view>


4. 路由使用示例:

4.1 示例目录
示例目录_图4.png


4.2 源码部分
4.2.1 组件相关:

Home组件

文件: components => Home.vue


<template>
    <div id="home">
        <h2>首页</h2>
        <div>这就是首页</div>
     </div>
</template>

<script>
    export default {
        name:"Home"
    }
</script>

<style>
    #home{
        color:#fff;
        text-align:center;
    }
    h2{
        font-size:40px;
        line-height: 80px;
    }
</style>

List组件

文件: components => List.vue

<template>
    <div id="list">
        <h2>列表页</h2>
        <div>这就是列表页</div>
    </div>
</template>

<script>
    export default {
        name:"List"
    }
</script>

<style>
    #list{
        color:#fff;
        text-align:center;
    }
    h2{
        font-size:40px;
        line-height: 80px;
    }
</style>

About组件

文件: components => About.vue

<template>
    <div id="about">
        <h2>关于作者</h2>
        <div>这就是关于作者页</div>
    </div>
</template>

<script>
    export default {
        name:"About"
    }
</script>

<style>
    #about{
        color:#fff;
        text-align:center;
    }
    h2{
        font-size:40px;
        line-height: 80px;
    }
</style>


4.2.2 定义和配置路由关系

路由:

文件: router => index.js

// 1. 导入模块
import Vue from 'vue';
import VueRouter from 'vue-router';

// 2. 使用VueRouter插件
Vue.use(VueRouter)

// 3. 导入组件
import Home from '../components/Home';
import List from '../components/List';
import About from '../components/About';

// 4. 配置路由与组件映射关系
let routes = [
    {
        path:'/home',
        component: Home
    },
    {
        path:'/list',
        component: List
    },
    {
        path:'/about',
        component: About
    }
]

// 5.实例化路由
const router = new VueRouter({
    routes
})

export default router


4.2.3 使用路由

使用路由进行页面跳转

文件: App.vue

<template>
    <div id="app">
        <div class="content">
            <router-view></router-view>
        </div>
        <ul>
            <li>
                <router-link to="/home">首页</router-link>
            </li>
            <li>
                 <router-link to="/list">列表页</router-link>
            </li>
            <li>
                    <router-link to="/about">关于作者</router-link>
            </li>
        </ul>

    </div>
</template>

<script>


    export default {
        name: 'App'
    }
</script>

<style>
    #app{
        position: fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background: skyblue;
    }
    ul{
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right:0;
        height:60px;
        border-top:1px solid #999;

    }
    li{
        flex:1;
        background: #eee;
        border-right:1px solid #999;
    }
    a{
        display:block;
        line-height:60px;
        text-align: center;
        font-size:20px;
        text-decoration: none;
    }

    .content{
        position: fixed;
        top:0;
        left:0;
        right:0;
        bottom:61px;

    }
</style>


4.3 示例显示结果
vue路由_图3.gif

通过示例:我们发现vue路由默认使用的是hash路由


5. 路由的配置

5.1 根路由配置

上面的示例中,我们在配置路由映射的时候,这配置了/home,/list,/about三条路由,

如图:

路由映射表_图5.png

但是我们在每次打开页面是,默认访问的路径是/,这条路径并没有映射任何组件内容,

因此router-view组件占位的地方不会显示任何内容

因而我们需要配置根路由显示的内容


有两种解决方案,

5.1.1 配置路由组件

第一种就是配置根路由/显示的组件,如下

{
    path:"/",
    component: Home,
  },

路由表

增加根路由映射_图6.png

显示结果

没显示首页组件对应的路径_图7.png


5.1.2 配置路由重定向

使用redirect字段配置路由重定向

{
    path:"/",
    // 路由重定向:
    // 虽然访问的是/根路由,但是自动重新转义到/home路由
    redirect: "/home"
  },

路由表:

路由重定向切换路由_图8.png

显示结果:

路由重定向显示的结果_图9.png

推荐使用重定向的配置方法.


5.2 路由模式

上一节有提到过,前端路由的实现有两种方案,一种是通过hash值,一种是通过H5 的history.

但是Vue路由默认使用hash模式.

如图:

hash模式路由_图10.png

hash路由中#看起来多多少少有点别扭.我们就像使用history模式,那要怎么设置呢


VueRouter配置项中处理提供一个routes用来配置路由映射表,还提供了一个mode选项用来配置路由模式

路由模式配置:

history路由模式配置_图12.png

路由显示样式:

history路由模式_图11.png
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,686评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,668评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,160评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,736评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,847评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,043评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,129评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,872评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,318评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2赞 351