admin管理员组

文章数量:1633912

基于vue-router实现组件化的页面切换 如何进行组件化进行开发： 1.将所有组件都拆分出来放在文件夹components里面。 2.将项目涉及的每个页面看成是一个组件。 3.然后在每个页面中引入需要构成视图的组件，将组件在该页面中嵌套成一个具体的页面。 4.再通过入口文件进行加载和初始化。 使用单文件组件实现组件化开发： 规范： 1.编码注释规范 2.项目目录结构规范 ----components 存放所有的组件 ----js 需要依赖js文件//（可以将这个js文件夹放在assets里面） ----build 打包以后js文件都放在build文件夹里面 ----template 存放页面组件 ----assets 将需要使用的任何资源都放在assets里面 ----index.html ----app.js 入口文件 ----webpack.config.js 3.实现组建化开发：

（1）.将目前可用组件都拆分成components


（2）.将页面看成组件 template里面
新建index.vue 作为首页 页面的组件
（3）直接在app.js初始化页面 vue-router如何去使用： 1.在index.html中引入js库 vue-router.js 2.在app.js里面引入一些被切换的页面 一般为.vue格式
3.需要在跳转的地方加上属性 v-link="{path:'/当前要跳转的路径'}"
4.还需要在页面中，声明一个指令去存放不同页面 <router-view></router-view>
5.启动路由 ①：在入口文件app.js中，声明空对象 ②：实例化路由 ③：通过 路由实例 .map({}) 路由具体配置 ④：通过 路由实例 .start(Obj,'#app'); 路由实例 .start(Obj,'管理边界id');
6.路由间的嵌套 当前路由里面嵌套路由 举例：/shop /shop/detail 实现二级路由： a: v-link进行配置 v-link="{path:'/一级请求/二级请求'}" b: map里面进行配置 通过一个属性subRoutes属性，如果希望在哪个一级请求里面去配置二级路由，就在那个一级请求里面去写subRoutes属性。 7.如何进行值传递 a:直接在v-link后面通过参数附加就可以了，search属性，query属性 I:值写在v-link里面 II:得到值在新切入的组件里面 III:ver-router实例 （1）：只要被vue路由处理过的组件，vue实例都被注入到组件内部 组件内部可以通过this.$route获取 组件内部的vue路由实例。 （2）：使用v-link进行传值的时候，传递的值也会被添加到对应vue路由实例里面，可以在这个组件内部的模板里面通过{{获取传递的值}} 8.路由钩子函数使用 （额外属性） 钩子函数:指的是系统一旦发生改变，就立即去通知对应处理的函数， 钩子函数，从内到外提供的函数，让我们可以手动控制路由 a:当前路由实例.beforeEach(); 指的是获取浏览器当前hash 刚好与map里面开始匹配的时候 beforeEach全局的 返回值 返回true 路由继续执行 返回false 路由停止匹配
b:当前路由实例.afterEach(); 指的是获取浏览器当前hash 与map里面匹配结束的时候
9.路由的另外一种使用方法 router.go();方法的使用,用途就是除了在超连接以外去打开地址如：<button></button> router.go({path:'/go',query:{goodsName:'xxxxxxx'}});


本文标签： 路由vue

版权声明：本文标题：Vue路由 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729177729a1188929.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。