第三十二节: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. 和动态组件的效果类似

使用展示:

   首页 列表  关于作者   

4. 路由使用示例:

4.1 示例目录

4.2 源码部分

4.2.1 组件相关:

Home组件

文件: components => Home.vue

List组件

文件: components => List.vue

About组件

文件: components => About.vue

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