Router 快速入门

简介

路由通俗的讲就是网址
不同的网址就是不同的路由
专业的讲访问不同的路由，加载不同的模块

安装

如果使用 vue-cli 构建初始化项目会提示选择安装
也可以自己手动安装

npm install vue-router --save
yarn add vue-router

核心文件

在 src/router/index.js 中的核心文件如下

// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// 引入页面组件，命名为HelloWorld
import HelloWorld from '@/components/HelloWorld'
// Vue全局使用Router
Vue.use(Router)
// 定义路由配置
export default new Router({
  routes: [                //配置路由，这里是个对象数组
    {                        //每一个链接都是一个对象
      path: '/',            //链接路径
      name: 'HelloWorld',        //路由名称，
      component: HelloWorld     //对应的组件模板
    }
  ]
})

使用 router

在系统入口 main.js 中注入 router

// 引入vue框架
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/>'
})