第一步
找到我们的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自由的奔跑就可以了
非常的好用!