Vue路由的理解

路由我觉得就是管理分配的解释，以前的老八股就是一个页面一个页面的跳，自从有了路由以后就可以一个页面根据不同的路由分配展现不同的内容了。
其实我不喜欢这个生词，router,哎…需要注意的是不管你是用的那个路由，你一定要遵循规则，否则用不到。
vue 的路由有几个：
动态路由：
就是根据参数的不同展现不同的内容。
现在src里面创建个文件夹，取个名字views
引入views文件夹里面的vue组件
import GoodsList from ‘./…/views/GoodsList’
以router里面的index为例：

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/goods/:goodsid/username/:lala',
      name: 'GoodsList',
      component: GoodsList
    }
  ]
})

path: ‘/goods/:goodsid/username/:lala’（带了两个参数）
mode:‘history’,是用来去除路由中的井号的，#本就是哈希模式

嵌套路由：就是子路由，用的地方最多的应该是类似于选项卡这种的。

import GoodsList from ‘./…/views/GoodsList’
import Image from ‘@/views/Image’
import Title from ‘@/views/Title’

image 和title都是GoodsList的子组件

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/goods',
      name: 'GoodsList',
      component: GoodsList,
      children:[{
        path: 'img',
        name: 'img',
        component: Image,
      },{
        path: 'title',
        name: 'title',
        component: Title,
      },]
    }
  ]
})
选项卡：
  <router-link to="/goods/img">img</router-link>
  <router-link to="/goods/title">title</router-link>
  <div><router-view></router-view></div>

编程式路由：就是实现页面跳真正跳转的。

<router-link to="/cart">购物车</router-link> 
<button @click="jump">点击跳转到购物车页面</button>

引入：
import Cart from ‘@/views/Cart’

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

下面是点击按钮跳转

export default {
        name: "GoodsList",
      methods:{
          jump(){
            this.$router.push({path:"/cart?id=100"});
          }
      }
    }

给路由和视图起名字

,{
      path: '/cart',
      name: 'cart',（这一步很关键）
      component: Cart,
    }

这一步也很关键

<router-link v-bind:to="{name:'cart'}">购物车</router-link>