vue-router的使用
来源:互联网 发布:2016域名价格排行榜 编辑:程序博客网 时间:2024/05/21 09:00
方式一:在初始化vue init webpack myPro的时候安装了vue-router的使用情况:
导入:这种方式 安装的vue-router,会在目录结构中产生一个 router子目录 。router目录中有一个index.js文件!
下面详细说一下index.js的文件内容:
由于在程序主入口main.js中也牵涉到vue-router,下面就是main.js
的内容说明(这些内容自动生成)
路由怎么显示呢。路由显示的设置在页面入口文件App.vue中:
方式二:通过npm install vue-router –save-dev方式安装的vue-router
使用步骤:
1.在main.js中引入vue-router:import vueRouter from “vue-
router”,
2.在main.js中启用vue-router : Vue.use(vueRouter) 注意
vueRouter就是第一步引入vue-router的别名vueRouter
3.在main.js中实例化vue-router :
var router = new vueRouter({ mode:"history", //跳转到子路由,不需要加# routes:[ //注意这里是routes,不是routers { path:'/apple', component:Apple //这ge组件需要在 main.js中引入 }, { path:'/orange' component:Orange //这ge组件需要在 main.js中引入 } ] })
4.将vue-router路由添加到vue实例中,这样所有组件都可以是用路由
new Vue({ el: '#app', router, //将路由vue-router添加到vue实例中(因为在第三步,var定 义的变量名为router,所以这里的router:router(冒号后 面是变量名,用es6简写为router),) });
详情见下图:![这里写图片描述](http://img.blog.csdn.net/20170907204056883?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM3MjE5MzAy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)同样路由的显示设置(<router-view>和<router-link>)也是在App.vue文件设置。同上。
vue-cli的目录介绍:(容易弄混淆)
main.js是程序入口文件,里面引入了需要的vue组件和路由router(路
由的实例化就在这个文件设置)
App.vue是页面入口文件,是vue组件和路由router的出口.(比如路由的显示就在这个文件设置)
2017.09.07周四
阅读全文
0 0
- vue-router的使用
- vue-router的使用
- Vue-router的使用
- 使用vue的router-link
- vue-router路由的基础使用
- vue-router路由的基础使用
- Vue-router嵌套路由的使用
- vue-router 懒加载的使用
- vue-router使用history的配置问题
- vue-router路由的基础使用
- vue-router的使用及实现原理
- Vue-router路由2.0的使用
- vue-router的两种使用方式
- Vue-router的使用和出现空白页
- vue中 router-link的简单使用
- 使用webpack创建vue项目,安装vue-router和不安装vue-router的区别
- vue中使用vue-router
- vue-router使用
- [Struts2] URL、URI以及ServletPath之间的区别
- Spring整合Activiti
- raft
- 打印带有多次换行的内容
- 安装并启动vue
- vue-router的使用
- ztree一级一级加载数据
- Java (运算符,优先级)
- [Struts2] 国际化
- 51单片机和HC05蓝牙模块对接成功,但是数据收发时候发现数据很多时候对不上问题解决
- 迈进算法的大门
- 树状数组 + 离散化 + dfs HDU 5877
- opencv交叉编译arm环境库,静态,动态库和可执行程序
- 虚拟机无法联网的解决办法