vue路由

2017-06-20

路由基本介绍

前言

什么是前端路由？

路由是根据不同的url地址展示不同的内容或界面
`前端路由`就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的

什么时候使用前端路由？

在单页面应用，大部分页面结构不变，只改变页面内容的使用

前端路由的优点和缺点？

优点：用户体验好，不需要每次都从服务器全部抓取，快速展现给用户。
缺点：不利于SEO
     使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存
     单页面无法记住之前滚动的位置，无法在你前进，后退的时候记住滚动的位置

基础路由介绍

vue-router用来构建SPA
或者this.$router.push({path:””})
<router-view></router-view>

基础路由学习

动态路由匹配
嵌套路由
编程式路由
命名路由和命名视图

动态路由匹配

什么是动态路由匹配?

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

在router的index.js里

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '../views/GoodsList.vue'

Vue.use(Router)

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

在GoodList.vue组件里

<template>
      <div>
    <div>商品列表页面</div>
    <span>{{$route.params.goodsId}}</span>
  </div>
</template>

<script>
  export default {
    name: "GoodsList",
    data() {
      return {};
    },
    computed: {},
    watch: {},
    methods: {},
    components: {},
    created() {},
    mounted() {}
  }
</script>

<style scoped>

</style>

打开本地的http://localhost:8080/#/goods/25端口

嵌套路由

什么是嵌套路由？

就是路由嵌套路由

在router的index.js里

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '../views/GoodsList.vue'
import Title from '../views/title.vue'
import Image from '../views/image.vue'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods',
      name: 'GoodsList',
      component: GoodsList,
      children: [{
        path: 'title',
        name: 'title',
        component: Title
      },{
        path: 'image',
        name: 'image',
        component: Image
      }]
    }
  ]
})

在GoodList.vue组件里

<template>
  <div>
    <div>商品列表页面</div>
    <router-link to="/goods/title">标题</router-link>
    <router-link to="/goods/image">图片</router-link>
    <router-view></router-view>
  </div>
</template>

编程式路由

什么是编程式路由

1.通过js来实现页面的跳转
2.$router.push("name")
3.$router.push({path:"name"})
4.$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
5.$router.go(1)