vue-router

路由基础介绍

前端路由有什么优点和缺点?

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

vue-router用来构建SPA
导航 : 或者this.$router.push({path:""})
视图 :

1.动态路由

模式	匹配路径	$route.params
/user/:username	/user/admin	{ username:'admin' }
/user/:username/stu/stuid	/user/admin/stu/123	{ username:'admin',stu:123}

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'

Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
    { path: '/', redirect: 'goods' },  //redirect重定向到goods，即设置goods为默认路由
    {
      path: '/goods/:goodId/user/:name',
      name: 'goods',
      component: goods
    }
  ]
})

// components/goods.vue

动态路由

2.嵌套路由

父路由嵌套子路由
router-link的路由方式 :

• to后面跟绝对路径
• to后面写相对路径,再加上append属性,就会在当前路径上追加

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'
import title from '@/components/title'
import image from '@/components/image'


Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', redirect: 'goods' },
    {
      path: '/goods',
      name: 'goods',
      component: goods,
      //子路由
      children: [
        {
          path: 'title',
          name: 'title',
          component: title
        },
        {
          path: 'image',
          name: 'image',
          component: image
        }
      ]
    }
  ]
})

// components/goods.vue

//components/title.vue

//components/image.vue

image子组件

title子组件

3.编程式路由

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

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'
import title from '@/components/title'
import image from '@/components/image'
import cart from '@/components/cart'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', redirect: 'goods' },
    {
      path: '/goods',
      name: 'goods',
      component: goods,
      children: [
        {
          path: 'title',
          name: 'title',
          component: title
        },
        {
          path: 'image',
          name: 'image',
          component: image
        }
      ]
    },
    {
      path: '/cart',
      name: 'cart',
      component: cart
    }
  ]
})

// components/goods.vue

// components/cart.vue

goods组件

点击链接和按钮都能成功跳转到购物车组件

cart组件

4.命名路由和命名视图

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

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'
import title from '@/components/title'
import image from '@/components/image'
import cart from '@/components/cart'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', redirect: 'goods' },
    {
      path: '/goods',
      name: 'goods',
      components: {
        default:goods,
        title:title,
        image:image
      }
    },
    {
      path: '/cart/:cartId',
      name: 'cart',
      component: cart
    }
  ]
})

// App.vue