有关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自由的奔跑就可以了

 

 

非常的好用！