介绍
路由:控制组件之间的跳转,不会实现请求、不用页面刷新,直接跳转-切换组件
安装
npm install vue-router
配置
在src文件新建文件夹router用来存放路由器的配置文件
在routes.js中引入所需要展示的页面
配置一级路由路径
图中Test02为引入的页面,名称与上方import的值对应
path为定义的路由路径
App.vue是项目的主组件,页面入口文件 ,所有页面都在App.vue下进行切换,app.vue负责构建定义及页面组件归集。
配置好路由之后在App.vue中 <div id ="app"></div>中放置一个<router-view></router-view> 将路由器匹配的组件渲染在这里。
二级路由配置原理基本一致
即在所在的一级路由的配置下添加children:[填写当前二级路由的路径的配置信息]
二级路由的路径需填所在一级路由的路径后接二级路径
同样在所在的一级路径所属页面下的div里面也放置一个<router-view></router-view> 将路由器匹配的组件渲染在这里。
最后再通过
export default routers(与上定义routers对应) 输出routers
切换到main.js下
引入 import VueRouter from 'vue-router'
再引入刚刚所配置好的路由
引进的vue-router必须要通过 Vue.use()使用路由
构建VueRouter对象,把引进的路由配置文件放进去
Vue.config.productionTip = false
上面这行代码的意思 是阻止显示生产模式的消息。
如果没有这行代码,或者设置为true,控制台就会多出这么一段代码。
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
大概意思就是:
你运行的Vu是开发模式。为生产部署时,请确保启用生产模式。
new Vue({ render: h => h(App), }).$mount('#app')
这里创建的vue实例没有el属性,而是在实例后面添加了一个$mount(’#app’)方法。
$mount(’#app’) :手动挂载到id为app的dom中的意思
再将构建的VueRouter对象放进来即可。