(尚039) Vue_router路由模式

说明:

1) 官方提供的用来实现 SPA 的 vue 插件

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

3) 中文文档: http://router.vuejs.org/zh-cn/

4) 下载: npm install vue-router --save

 

==================================================

1.路由器与路由的概念区别?

路由器不是路由,是两种不同的概念;

路由器管理路由;

2.什么是路由?(后台路由和前台路由)

1).路由是键值对,是一种映射关系;(k-v)

2).k是path,value是?

后台路由的 value是处理请求的回调函数;

前台路由是组件

3.相关API说明

1) VueRouter(): 用于创建路由器的构建函数

new VueRouter({

// 多个配置项

})

说明:创建一个路由器出来;路由器创建的时候传的是配置对象

 

2) 路由配置

routes: [//routes复数说明是多个路由;值是数组类型;路由无先后顺序;

{ // 一般路由

path: '/about',

component: About

},

{ // 自动跳转路由

path: '/',

redirect: '/about'

}

]

3) 注册路由器

import router from './router'

new Vue({

router

})

4) 使用路由组件标签

1. <router-link>: 用来生成路由链接

<router-link to="/xxx">Go to XXX</router-link>

2. <router-view>: 用来显示当前路由组件界面

<router-view></router-view>