一、简单介绍
vue-router是vue官方的路由解决方案,简单易用,中文官方地址如下:
vue-router中文手册
二、安装
vue-router是一个插件包,需要用npm来进行安装的。如果采用vue-cli构建初始化项目会提示安装,也可以自己使用命令安装:
npm install vue-router --save
三、解读核心文件
用vue-cli构建项目之后,在src/router/index.js文件中,看到以下的路由核心文件:
// 引入vue框架import Vue from 'vue'// 引入vue-router路由依赖import Router from 'vue-router'// 引入页面组件,命名为HelloWorldimport HelloWorld from '@/components/HelloWorld'// Vue全局使用RouterVue.use(Router)// 定义路由配置export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称,
component: HelloWorld //对应的组件模板
}
]})
四、使用
在系统入口文件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/>'})
转载于:https://blog.51cto.com/4547985/2390791