站内搜索:
首页 >> 前端 >> 内容
Vue路由

时间:2017/4/11 9:26:00

Vue路由:基于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

Vue路由Vue路由

 

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

 

Vue路由

  • 上一篇:使用npm-开发者
  • 下一篇:DojoAMD模块入门
  • 返回顶部