vue-router定义路由的四种方式

vue-router是对浏览器BOM对象里的history的封装。

路由类型

1. 动态路由匹配
2. 嵌套路由
3. 编程式路由
4. 命名路由和命名视图

动态路由匹配

在路由路径里添加“/：参数名”

path: '/goods/:goodsId'

组件里获取参数使用

{{$route.params.goodsId}}

嵌套路由

场景：页面中需要使用二级子菜单。如个人中心一级菜单下，有个人资料、我的收藏、购物车等二级菜单。

在路由里使用children

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

在父组件里使用 router-view 标签，作为子组件的入口。使用 router-link 进行跳转。

<template>
  <div>
    <router-link to='/goods/title'>显示商品标题</router-link>
    <router-link to='/goods/img'>显示商品标题</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)

//组件获取参数
{{$route.query.a}}

命名路由

给路由定义不同的名字，根据名字进行匹配

<router-link v-bind:to="{name: 'GoodsList', params: {a:123}}">跳转到商品列表</router-link>

注意：路由跳转 to 必须要使用 v-bind 指令进行绑定，绑定后指令会对object对象进行编译，生成我们要的路由。否则会原生输出url。