Vue Router的入门以及简单使用

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

基本概念：

路由：是一种映射关系，是 “path =>组件”的映射

路由器：管理路由的，在路由器里配置路由

1、npm 安装

npm install vue-router

2、相关API说明

（1）路由配置 ：route是一条路由的实现,  它是一个对象，由两个部分组成： path和component. 或path和redirect。 path 指路径，component 指的是组件。多个route组成一个routes。

routes:[

{//一般路由

path:'/about',

component:About //组件

},

{//自动跳转路由

path:'/',

redirect:'/about'

}

]

（2）VueRouter()：用于创建路由器的构造函数，接受routes参数

new Router({

//多个配置项

routes // routes: routes 的简写

})

（3）注册路由器：把router 实例注入到 vue 根实例中

import router from "./router"; //先引入路由

new Vue({
router,
...
})

（4）使用路由组件标签

①<router-link>：用来生成路由链接

<router-link to="./xxx">go to xxx</router-link>

②<router-view>：用来显示当前路由组件界面，匹配了哪个组件就会显示哪个组件的界面

<router-view></router-view>

执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和router/index.js 中配置的路径{ path: '/home', component: Home}  path 一一对应，从而找到了匹配的组件， 最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现是基于hash 实现的。

3、简单使用

一：基本路由

基本目录结构：

注意：组件包括两种，路由组件和非路由组件，非路由组件放在components文件夹中，路由组件放在另一个文件夹中，通常命名为views或者pages

（1）定义路由器模块 router/index.js

/*
路由器模块
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入路由组件
import About from '../views/About.vue'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

export default new VueRouter({//向外暴露一个路由器
    //n个路由
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
        {//当请求根路径时，重定向请求home
            path:'/',
            redirect:'/home'
        }
    ]
})

（2）在入口的main.js中引入路由器，并进行配置

import Vue from 'vue'
import App from './App'
import router from './router' //index可以省略不写，引入路由器



new Vue({//配置对象的属性名都是一些默认的属性名，不能随便修改
    el:'#app',
    components:{
        App
    },
    template:'<App/>',
    router
})

（3）App.vue中使用路由组件标签 <router-link>和<router-view>

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-offset-2 cool-xs-8">
                <div class="page-header"><h2>Router Basic - 01 </h2></div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    <router-link to="/home" class="list-group-item">Home</router-link>
                <router-link to="/about" class="list-group-item">About</router-link>                   
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-body">
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>

    export default{
        
    }
</script>

<style>
    .container{
        width:1000px;
        margin:0 auto;
    }
    .router-link-active{
        color:red !important;
    }
</style>

（4）编辑路由组件的内容

Home.vue

<template>
    <div>
        Home
    </div>
</template>

<script>
    export default{
        
    }
</script>

<style>

</style>

About.vue

<template>
    <div>
        About
    </div>
</template>

<script>
    export default{

    }
</script>

<style>

</style>

最终呈现结果：

 二：嵌套路由：点击一个路由之后，打开的页面中仍然存在路由

效果图：

（1）修改路由器模块（ router/index.js）中的routes配置

/*
路由器模块
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入路由组件
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import Message from '../views/Message.vue'
import News from '../views/News.vue'

Vue.use(VueRouter)

export default new VueRouter({//向外暴露一个路由器
    //n个路由
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'/home/message', //path最左侧的斜杠永远代表根路径
                    component:Message
                },
                {
                    path:'/home/news',
                    component:News
                },
                {
                    path:'/home',
                    redirect:'/home/news'
                }
            ]
        },
        {//当请求根路径时，重定向请求home
            path:'/',
            redirect:'/home'
        }
    ]
})

（2）Home组件中，使用路由组件标签 <router-link>和<router-view>

<template>
    <div style="margin-left:10px;">
        <h2>Home 组件</h2>
        <div>
            <ul  class="nav nav-tabs">
                <li><router-link to="/home/news">News</router-link></li>
                <li><router-link to="/home/message">Message</router-link></li>
            </ul>
            <div>
                <router-view></router-view>
                <hr>
            </div>

        </div>
    </div>
</template>

<script>
    export default{
        
    }
</script>

<style>

</style>

（3）编辑新增的News和Message路由组件的内容

News.vue

<template>
    <div>
        <ul>
            <li v-for="(news,index) in newsArr" :key="index">
                {{news}}
            </li>           
        </ul>

    </div>
</template>

<script>
    export default{
        data(){
            return {
                newsArr:['news1','news2','news3']
            }
        }
    }
</script>

<style>

</style>

Message.vue

<template>
    
    <ul>
        <li v-for="(message,index) in messages" :key="message.id">
            <a href="">{{message.title}}</a>
        </li>
    </ul>
    
</template>

<script>
    export default{
        data(){
            return {
                messages:[]
            }
        },
        mounted(){
            var that = this;
            //模拟ajax请求从后台请求数据
            setTimeout(()=>{
                const messages = [
                    {id:1,title:'message1'},
                    {id:2,title:'message2'}
                ]
                that.messages = messages;
            },1000)
        }
    }
</script>

<style>

</style>