Vue:(二)VueRouter

2018-12-04

一.基础介绍

vue-router用来构建SPA(单页面应用)
什么是前端路由？
- 路由是根据不同url地址展示不同的内容或页面
- 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的
什么时候使用前端路由？
- 在单页面应用，大部分页面结构不变，只改变部分内容的使用
前端路由的优缺点：
- 优点：
  - 用户体验好，不用每次都从服务器全部获取，可以快速展现给用户
- 缺点：
  - 不利于SEO
  - 使用浏览器的前进/后退键时会重新发送请求，没有合理地利用缓存
  - 单页面无法记住之前滚动的位置，无法在前进/后退时记住滚动的位置
分类：
- 动态路由匹配
- 嵌套路由
- 编程式路由
- 命名路由和命名视图（很少用）

二.动态路由

模式	匹配路径	$router.params
/user/:username	/user/evan	{ username:’evan’ }
/user/:username/post/:post_id	/user/even/post/123	{username:’evan’,post_id:123 }

//index.js中
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'//从某路径引入组件

Vue.use(Router)

export default new Router({
  routes:[
  {
     path:'/goods/:goodsId/user/:name',//通过此path访问组件内容
     name:'GoodsList',
     component:GoodsList
  }
 ]
})
//组件间传参,组件中写$router.params.goodsId  $router.params.name

三.嵌套路由

路由嵌套路由

//index.js中
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'//从某路径引入组件
import Goods1 from './../views/Goods1'//从某路径引入子组件
import Goods2 from './../views/Goods2'

Vue.use(Router)

export default new Router({
  routes:[
  {
     path:'/goods',
     name:'GoodsList',
     component:GoodsList,
     children:[
     {
        path:'goods1',
        name:'goods1',
        component:Goods1
     },
     {
        path:'goods2',
        name:'goods2',
        component:Goods2
     },
   ]
  }
 ]
})

//组件GoodsList中引入子组件Goods1和Goods2
<template>
  <div>
    <span>{{$router.params.goodsId}}</span>
    <span>{{$router.params.name}}</span>
    <router-link to="/goods/goods1"></router-link>
    <router-link to="/goods/goods2"></router-link>
  <div>
    <router-view></router-view>
  </div>
  </div>
</template>

四.编程式路由

通过js来实现页面跳转
- $router.push(“name”)
- $router.push({path:”name”})
- $router.push({path:”name?a=123”})或者$router.push({path:”name”,query:{a=123}})
- $router.go(1)

//index.js中
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'//从某路径引入组件
import Car from './../views/Car'//从某路径引入子组件

Vue.use(Router)

export default new Router({
  routes:[
  {
     path:'/goods',
     name:'GoodsList',
     component:GoodsList,
     {
       path:'/car',
       component:Car
     }
   }
 ]
})

//组件GoodsList.vue中
<template>
  <div>
    <div>
      <router-view></router-view>
    </div>
    <router-link to="/car"></router-link>
    <button @click="jump"></router-link>
  </div>
</template>  
<script>
  export default{
    data(){
      return{
        msg:'hello vue'
      }
    },
    methods:{
      jump(){
        this.$router.push({path:'/car?goodsId=123'});//可以跳转页面...go...
      }
    }
  }
</script>

//组件Car.vue中
<template>
  <div>
    <span>{{$router.query.goodsId}}</span>//页面间传参
  </div>
</template>
<script>
  export default{
    data(){
      return{
        msg:'hello vue'
      }
   }
  }
</script>

五.命名路由/视图

给路由定义不同的名字，根据名字进行匹配
给不同的router-view定义名字，通过名字进行对应组件的渲染