概念

route：路由，url 地址
routes：route 的数组集合
router：路由器，管理 routes 集合中的 route

设置路由默认值

1
2
3
4
5
6
7
8
const routes=[
  {path:'/url',component:com},
  {path:'/url',component:com},
  // 可以配置重定向
  {path:'',redirect:'path'}
  // 或者重新写个路径为空的路由
  {path:'',component:path}
]

用重定向和单独配置路由的区别：

重定向实际上是当匹配到路径符合条件的时候去执行对应的路由，当然这个时候的url上面的地址显示的是对应的路由，页面也是对应的路由页面；

重新配置路由是当匹配到路径符合条件的时候，router-view页面展示部分负责拿符合条件路由的页面来展示，实际上url是没有发生变化的；

动态路由

1
{path:"/user/:name",component:user}

嵌套路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  path:'/page1',
  component:page1,
  children: [
    {
      path: "phone",
      component: phone
    },
    {
      path: "computer",
      component: computer
    },
  ]
}

路由导航方式

标签导航

1
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

编程式导航

1
2
3
4
5
// 普通路由：
router.push({ path: '/user/:userId', params: { userId: 123 }})
 
// 命名路由：
router.push({ name: 'user', params: { userId: 123 }})