vue-router-安装和配置方式

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)
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值