Vue：（三十五）路由vue-router

今天，我们开始学习vue中一个很关键的知识点，路由。

理解

vue的一个插件库，专门用来实现SPA应用

1. 单页web应用

2. 整个应用只有一个完整的页面

3. 点击页面中的导航连接不会刷新页面，只会做页面的局部更新

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

下来，看一下工程结构：

这里注意一下，我们为了区分一般组件和路由组件，会统一把路由组件放在pages目录下。

首先，我们要先安装vue-router插件：npm -i vue-router，这里需要注意版本的问题

然后在main.js中导入并使用路由：

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//引入路由器
import router from './router/index'

//关闭Vue的生产提示
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
  render: h => h(App),
  router: router,
}).$mount('#app')

创建路由规则：

router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'

//创建并暴露一个路由器
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
    },
    {
      path: '/home',
      component: Home,
    },
  ],
})

接下来创建路由组件：

About.vue

Home.vue

最后，在app.vue中引入并使用路由组件，进行相关的操作

App.vue

结果如下：

以上就是用过一个案例来使用vue-router。

我是空谷有来人，谢谢支持。