Vue路由: Vue-router基本配置与使用

国庆连载（3）

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.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路由默认使用的是hash路由

5. 路由的配置

5.1 根路由配置

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

如图:

 

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

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

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

有两种解决方案,

5.1.1 配置路由组件

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

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

 路由表

 显示结果

 

5.1.2 配置路由重定向

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

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

路由表:

 显示结果:

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

5.2 路由模式

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

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

如图:

 

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

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

路由模式配置:

 路由显示样式:

 vue路由内容到此结束，end！！！