vue-router-安装和配置方式
目前前端流行的三大框架,都有自己的路由实现:
1.Angular的ngRouter
2.React的ReactRouter
3.Vue的vue-router
vue-router
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/
安装和使用vue-router
直接使用npm来安装路由即可
步骤一:安装vue-router
npm install vue-router --save
–save 因为在运行的时候还需要
步骤二:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)
第一步:导入路由对象
第二步:创建路由实例,并且传入路由映射配置
第三步:在Vue实例中挂载创建的路由实例
src文件里面创建一个router文件,在router文件里面创建一个index.js文件
index.js文件中配置路由
配置路由相关的信息:
import VueRouter from 'vue-router'
import Vue from 'vue'
//1.通过vue.use(插件),安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象
const routers=[
]
const router = new VueRouter({
//配置路由和组件之间的应用关系
routers
})
//3.将router对象传入到vue实例
export default router
最后将配置好的文件传入main.js文件中
在Vue实例中挂载
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})