简介

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

安装

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

  1. npm install vue-router --save
  2. yarn add vue-router

核心文件

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

  1. // 引入vue框架
  2. import Vue from 'vue'
  3. // 引入vue-router路由依赖
  4. import Router from 'vue-router'
  5. // 引入页面组件,命名为HelloWorld
  6. import HelloWorld from '@/components/HelloWorld'
  7. // Vue全局使用Router
  8. Vue.use(Router)
  9. // 定义路由配置
  10. export default new Router({
  11. routes: [ //配置路由,这里是个对象数组
  12. { //每一个链接都是一个对象
  13. path: '/', //链接路径
  14. name: 'HelloWorld', //路由名称,
  15. component: HelloWorld //对应的组件模板
  16. }
  17. ]
  18. })

使用 router

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

  1. // 引入vue框架
  2. import Vue from 'vue'
  3. // 引入根组件
  4. import App from './App'
  5. // 引入路由配置
  6. import router from './router'
  7. // 关闭生产模式下给出的提示
  8. Vue.config.productionTip = false
  9. // 定义实例
  10. new Vue({
  11. el: '#app',
  12. router, // 注入框架中
  13. components: { App },
  14. template: '<App/>'
  15. })