Vue路由

基于vue-router实现组件化的页面切换如何进行组件化进行开发：1.将所有组件都拆分出来放在文件夹components里面。2.将项目涉及的每个页面看成是一个组件。3.然后在每个页面中引入需要构成视图的组件，将组件在该页面中嵌套成一个具体的页面。4.再通过入口文件进行加载和初始化。使用单文件组件实现组件化开发：规范：1.编码注释规范2.项目目

玉米_欣

4890人浏览 · 2016-11-14 22:44:20

玉米_欣 · 2016-11-14 22:44:20 发布

  基于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 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^