vue-router 基本使用

说明：vue-router是vue的一个最常用的的插件，用于路由跳转。是做SPA应用的必备哦！

一、路由基本使用

1、名词解释

路由器：用于管理路由

路由：一种映射关系，即key：value 。 key：是path；value：是组价。

2、API说明

1) . VueRouter(): 用于创建路由器的构建函数
        new VueRouter({
               // 多个配置项
        })

2).  路由配置
        routes: [
                { // 一般路由
                        path: '/about',
                        component: About
                 },
                 { // 自动跳转路由
                         path: '/',
                         redirect: '/about'
                  }
        ]

3).  注册路由器
        import router from './router'
                new Vue({
                         router
                })
4).  使用路由组件标签
        a. <router-link>: 用来生成路由链接
                <router-link to="/xxx">Go to XXX</router-link>

                注意：router-link默认解析成 a 标签；但可以用 tag 属性指定解析成什么标签，如：tag = ‘li’
        b. <router-view>: 用来显示当前路由组件界面
                <router-view></router-view>

 

3、具体使用

3.1 安装：npm  install vue-router --save

3.2 路由配置（路由一般是一个新的模块 router/index.js）

3.3 注册路由器 （主文件main.js中）

4、页面中使用路由

5、  优化路由器配置

linkActiveClass: 'active', // 指定选中的路由链接的 class

 

二、嵌套路由

1、配置子路由

2、页面中使用路由

3、效果图：

 

相关文档：

github: https://github.com/vuejs/vue-router

https://github.com/vuejs/vue-router

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！