vue_router-1技术胖

作者: 吕阳 | 来源:发表于2017-10-30 14:10 被阅读166次

vue_router-1技术胖
Electron学习笔记（技术胖）
技术视频网站
【Flutter】Text Widget 的使用
【Flutter】Image 的使用
技术胖flutter视频
第二天 HelloWorld、Text、Container
vuepress主题开发-主题的继承
webpack详细讲解
flutter 踩坑记录

01

解读router/index.js文件

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

增加一个Hi的路由和页面

index.js与components/Hi.vue

Hi.png

1.router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi' //引入


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld
    },{
      //添加
      path: '/Hi',
      name: 'Hi',
      component: Hi
    }
  ]
})

2.component/Hi.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    
  </div>
</template>

<script>
export default {
  name: 'Hi',//更改
  data () {
    return {
      msg: 'Hi Page'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}


</style>

02子路由

在Hi页面下写两个子路由

3.png

Hi页面占位置. <router-view/>

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-view/>
    
  </div>
</template>

router/index.js导航

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld
    },{
      path: '/hi',
      name: 'Hi',
      component: Hi,
      children:[
        {path: '/',component:Hi},
        {path: 'hi1',component:Hi1},
        {path: 'hi2',component:Hi2},
      ]
    }
  ]
})

03 vue-router如何参数传递

开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（类似于面包屑导航）。

一、用name传递参数

在路由文件src/router/index.js里配置name属性。

 routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
 ]

模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：

<p>{{ $route.name}}</p>

二、通过<router-link> 标签中的to传参

也许你也会觉的上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用<router-link>标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：


<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

了解基本的语法后，我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

 <router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

 {path:'/hi1',name:'hi1',component:Hi1},

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

{{$route.params.username}}

04 单页面多路由区域操作

这节课我们讲“单页面多路由区域操作”，实际需求是这样的，在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。例如我们在src/App.vue里加上两个<router-view>标签。我们用vue-cli建立了新的项目，并打开了src目录下的App.vue文件，在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

最终效果

4.png

拢共需要3步.

src/App.vue

    <div>
    <router-link to="/">LvYang</router-link> | 
    <router-link to="/tanyue">TanYue</router-link> |
    </div>
    <router-view/>
    
    <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
    <router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import LvYang from '@/components/LvYang'
import TanYue from '@/components/TanYue'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      
      components: {
        default: HelloWorld,
        left:LvYang,
        right:TanYue
      }
    },
    {
      path: '/TanYue',
      
      components: {
        default: HelloWorld,
        left:TanYue,
        right:LvYang
      }
    }
  ]
})

component,新建LvYang.vue,TanYue.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  
  
   
  </div>
</template>

<script>
export default {
  name: 'LvYang',
  data () {
    return {
      msg: 'LvYang'
    }
  }
}
</script>

第5节：vue-router 利用url传递参数

我们在第3节虽然已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传值，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。

成品效果

5.png

利用url传值,拢共需要3步.

App.vue

   <div>
    
    <router-link to="/params/520/TanYue is my love!">Params</router-link> 
    </div>
    <router-view/>

router/index.js path括号里面是正则只接受数字.


import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Params from '@/components/params'



Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params
    }
  ]
})

components/params.vue

  <div>
    <h1>{{ msg }}</h1>
    <p>ID:{{ $route.params.newsId }}</p>
    <p>Title:{{ $route.params.newsTitle }}</p>
   
  </div>

第6节：vue-router 的重定向-redirect

redirect基本重定向

我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。

export default new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params
    },{
      path:'/goback',
      redirect:'/'
    }
 
  ]
})

重定向时传递参数

{
  path:'/params/:newsId(\\d+)/:newsTitle',
  component:Params
},{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}

第7节：alias别名的使用

会在网址显示tanyue.不要配到根目录不起作用

{
    path: '/hi1',
    component: Hi1,
    alias:'/tanyue'
 }

错误示范

{
  path: '/',
  component: Hello,
  alias:'/home'
}

第8节：路由的过渡动画

炫酷的效果,拢共需要两部,1,CSS动画效果.2.包裹需要的route-view,并选择模式.

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

<transition name="fade" mode="out-in">
  <router-view ></router-view>
</transition>

第9节：mode的设置和404页面的处理

一个是mode,一个是Error的配置.没什么好说的了.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Params from '@/components/params'
import Hi1 from '@/components/Hi1'
import Error from '@/components/Error'



Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      
      component: HelloWorld
    },
    {
      path:'/params/:newsID(\\d+)/:newsTitle',
      component: Params

    },
    {
      path:'/goback',
      redirect:'/'

    },
    {
      path: '/hi1',
      component: Hi1,
      alias: '/tanyue'
    },
    {
      path:'*',
      component:Error
    }

  ]
})

第10节：路由中的钩子

路由配置文件中的钩子函数

{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log('我进入了params模板');
        console.log(to);
        console.log(from);
        next();
},

写在模板中的钩子函数

export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}
</script>

第11节：编程式导航

<template>
  <div class="hello">
    <h1>{{$route.params.newsID}}</h1>
   
    <h1>{{$route.params.newsTitle}}</h1>
    <button @click="goHome">回到首页</button>
    <button @click="goback">后退</button>
  </div>
</template>

<script>
export default {
  name: 'Hi',
  data () {
    return {
      msg: 'Hi Page'
    }
    },
   methods:{
    goback(){
      this.$router.go(-1);
    },
    goHome(){
      this.$router.push('/');
    }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}


</style>

vue_router-1技术胖
01 解读router/index.js文件增加一个Hi的路由和页面 index.js与components/H...
Electron学习笔记（技术胖）
Electron学习笔记（技术胖）标签（空格分隔）：前端桌面技术胖 Electron 安装前提：已经安装...
技术视频网站
前端技术技术胖web博客。互联网技术 IT大咖说
【Flutter】Text Widget 的使用
本博文为跟随【技术胖】前辈学习谷歌移动UI框架【Flutter】的笔记前辈的个人主页网址如下：首页 | 技术胖-胜...
【Flutter】Image 的使用
本博文为跟随【技术胖】前辈学习谷歌移动UI框架【Flutter】的笔记前辈的个人主页网址如下：首页 | 技术胖-胜...
技术胖flutter视频
https://jspang.com/post/flutterDemo.html
第二天 HelloWorld、Text、Container
咸鱼技术博客：https://www.yuque.com/xytech/flutter/sh4fbm技术胖博客：h...
vuepress主题开发-主题的继承
你们好，我叫JSShou，读作JS瘦或者技术瘦，灵感来至前辈技术胖(JSPang)，热爱前端技术而人比较瘦，原名许...
webpack详细讲解
http://jspang.com/2017/09/16/webpack3-2/ 技术胖讲述
flutter 踩坑记录
参考资料技术胖在 bilibili 的 flutter 系列视频坑 1. Android Studio 无法...