简介
路由通俗的讲就是网址
不同的网址就是不同的路由
专业的讲访问不同的路由,加载不同的模块
安装
如果使用 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/>'
})