有关vuejs中router路由的配置以及应用(新手)

第一步

找到我们的vue工程目录打开src

 如果src底下有router文件夹就不需要新建了,没有router文件夹的新建一个,然后创建一个index.js文件,创建完毕如图所示

 在index.js中具体代码看下面,

//配置路由信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1.通过Vue。use(插件),安装插件
Vue.use(VueRouter)
//2.创建VueRounter对象(用于绑定)
const routes = []

const router = new VueRouter({
	routes
})
//3.将rounter对象传入到VUE 实例中
export default router

第二步

将写完的index.js导入到main.js中

 直接import router from './router'就可以,这个地方的下级可以省略,他会自动查找router配置

import Vue from 'vue'
import App from './App.vue'
import router from './router/index' //这个router的下级列表可不写

Vue.config.productionTip = false

new Vue({
	el:'#app',
	router,
  render: h => h(App)
})

以上router的基本配置就完成了,

下面是创建子组件设置路由的映射关系

第一步 随便创建两个子组件(新手注意:一定要注意导入和导出)

 第二步 在router/index.js中设置映射关系

 

import VueRouter from 'vue-router'
import Vue from 'vue'
import home from '../components/home'
import about from '../components/about'
//1.通过Vue。use(插件),安装插件
Vue.use(VueRouter)
//2.创建VueRounter对象
const routes = [
{
	path:'/home',
	component:home
},
{
	path:'/about',
	component:about
}
]

const router = new VueRouter({
	routes
})
//3.将rounter对象传入到VUE 实例中
export default router

好的,配置完成后去终端 npm run dev自由的奔跑就可以了

 

 

非常的好用!

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值