vue-router

1.路由

（1）路由（route）：就是⼀组key-value的对应关系

（2）路由器（router）：多个路由需要经过路由器的管理

2.vue-router的理解

vue 的⼀个插件库，专⻔⽤来实现 SPA 应⽤

3.对SPA应⽤的理解

（1） 但⻚⾯web应⽤（single page web application，SPA）

（2） 整个应⽤只有⼀个完整的⻚⾯

（3）点击⻚⾯中的导航链接不会刷新⻚⾯，只会做⻚⾯的局部更新

（4） 数据需要通过ajax请求获取

4.路由的理解

（1）什么是路由？

⼀个路由就是⼀组映射关系（ key-value ）

key 为路径， value 为 component （⽤于展示⻚⾯内容） ⼯作过程：当浏览器的路径改变时，对应的组件就会显示

（2）基本使⽤

• 安装vue-router，npm install vue-router
• 应⽤插件：Vue.use(VueRouter)
• 编写router配置项

//引⼊VueRouter
import VueRouter from 'vue-router'
//引⼊路由组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象，去管理⼀组⼀组的路由规则
const router = new VueRouter({
route:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router 

 

• 实现路由切换

<router-link to = '/about' > About </router-link>

• 指定显示位置

<router-view></router-view>