• 前端路由

在web开发中，路由是指根据url分配到对应的处理程序。

• vue-router

作用:通过管理url，实现url和组件的对应和通过url进行组件之间的切换。

• 单页应用

加载单个HTML页面，并在用户与应用程序交互时动态更新该页面。

• 使用vue-router方法：

1. 安装模块：
   npm install vue-router --save
2. 引入模块：
   import VueRouter form 'vue-router'
3. 作为Vue的插件
   Vue.use(VueRouter)
4. 创建路由实例对象
   new VueRouter({--配置参数})
5. 注入Vue选项参数
   new Vue({router})
6. 告诉路由渲染的位置
   <router-view></router-view>

路由配置与创建的代码，都放到src下的router文件中，便于查找。

• 路由的基本配置

image.png

• index.js（路由配置文件）:

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import about from '@/components/about'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/about',
      name: 'about',
      component: about
    }
  ]
})

• main.js（应用入口文件）

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

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