Vue-Router

一、介绍

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。一般的页面应用，是用一些超链接来实现页面之间的跳转和切换的。在vue-router单页面应用中，则是路径之间的切换，即组件之间的切换。

二、Vue Router的使用

2.1 安装引入router，有三种方式：

（1）下载vue.js和router.js，然后放在项目资源文件夹下，然后使用：

<script src="js/vue.js"></script>

<script src="js/vue-router.js"></script>

（2）cdn引入或其他第三方库：

 

（3）项目内安装vue-router：

终端进入项目，执行语句：npm install vue-router --save

2.2 配置路由

在项目中创建router文件夹，文件夹下创建一个js文件进行路由配置：

（1）首先引入router并使用：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

（2）其次导入需要配置的所有页面：使用import

（3）然后写一些路由规则：

const routes = [
  {
    path: ‘’,
    component:
  }
]

进行路由的基础配置

（4）初始化：

const router = new Router({
  routes,
  history: 'hash',//路由模式
})

（5）导出以供使用：

export default router

2.3 main.js中导入以供全局使用：

import router from './router'

new Vue时要:

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

2.4 在要使用路由的页面使用：

<router-view/>或<router-link/>