vue项目常用依赖安装①——vue-router

一、介绍

vue-router是vue官方的路由解决方案，简单易用，中文官方地址如下：vue-router中文手册

二、安装

npm install vue-router --save

三、配置

1. 用vue-cli构建项目之后，在src/router/index.js文件中，看到以下的路由核心文件：

// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// 引入首页组件
import index from '@/components/index'
// Vue全局使用Router
Vue.use(Router)

// 定义路由配置
const router = new Router({
  //每次路由切换成功进入激活状态
  linkActiveClass: 'active',
  //路由模式，取值为history与hash
  mode: '',//默认hash
  base: '/', //打包路径，默认为/，可以修改
  routes: [
    {
      path: '/', //路径
      name: 'index',// 命名路由-路由名称
      component: index  // 命名视图组件
    },
  ]
})
export default router;

2. 在系统入口文件main.js中注入router，代码如下：

// 程序入口：环境依赖，插件
import Vue from 'vue'
// 引入根组件
import App from './App'
// 引入路由配置
import router from './router'
// 关闭生产模式下给出的提示
Vue.config.productionTip = false

// 定义实例
new Vue({
 el: '#app',
 router,// 注入框架中
 components: { App },
 template: '<App/>'
})

3. 在src/router/index.js中使用全局钩子与懒加载，最终代码如下

// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// 引入首页组件（使用懒加载就可以不然使用这个）
import index from '@/components/index'
// Vue全局使用Router
Vue.use(Router)

// 定义路由配置
const router = new Router({
 //每次路由切换成功进入激活状态
 linkActiveClass: 'active',
 //路由模式，取值为history与hash
 mode: 'history',
 base: '/', //打包路径，默认为/，可以修改
 routes: [
   {
     path: '/', //路径
     name: 'index',// 命名路由-路由名称
     // component: index    //更换为懒加载了
     component:resolve=>require(['@/components/index'],resolve),// 命名视图组件---懒加载
     meta: {
       title: '首页'
     },
   },
 ]
})

// 全局路由拦截-进入页面前执行
router.beforeEach((to, from, next) => {
 // 这里可以加入全局登陆判断
 // 继续执行
 next();
});

// 全局后置钩子-常用于结束动画等
router.afterEach(() => {
 //不接受next
});

export default router;