vue-router设置页面路由!

我是在初始化项目的时候就装了vue-router,没有装的同学npm install vue-router一下就好了。

 vue-router设置页面路由!

模块化工程中需要use:(router/index.js中)

vue-router设置页面路由!

 然后再main.js中引入:(这个里面的vue.use(vueRouter)也可以省略)

vue-router设置页面路由!

基本的配置写好了 然后再来看html里(我的三个路由页面):

vue-router设置页面路由!

在需要配置路由的地方:

 vue-router设置页面路由!

 红色部分代表我需要点击跳转到不同地方

黄色部分是指跳转到的地方渲染在页面的哪里(router-view类似于引入的子组件,只是这个名字是规定的,也不需要import。)

 然后再在router下的index.js import子页面:

vue-router设置页面路由!

这样就可以实现点击不同的元素跳转到不同的页面啦 而且路由也会变化:

vue-router设置页面路由!

vue-router设置页面路由!

完毕!撒花!~