四、Vue Router——确定页面url

（一）需求

目前有三个页面：记账#/money、标签#/labels、统计#/statistics。此外还需要默认/进入记账页面#/money以及有个404页面

（二）步骤

1. 因为使用的是Vue Router，所以可以使用哈希模式确定每个页面的路径

2. 进入router/index.ts添加router

• path不用加#，而且path一般小写
• 每个path所用的component是大写
• 在src/views里添加四个页面要用的component:Money.vue、Labels.vue和Statistics.vue和NotFound.vue，然后在里面先写点东西，方便后面看到。

const routes = [
  {
    path: '/',
    redirect: '/money'   //把根路径重定向到路径/money
  },
  {
    path:'/money',
    component:Money
  },
  {
    path:'/labels',
    component: Labels
  },
  {
    path:'/statistics',
    component: Statistics
  },
   
    //输入路径之后，每次都是从最上面的路径依次向下找有没有和输入的路径一样的。如果上面的都不是，那输入的路径就属于*（除去上面后的所有的路径）---这就是404页面
  {
    path:'*',    
    component: NotFound
  }
]

3. 其余的有些东西你暂时别管（因为创建Vue项目时已经给你写好了

• router/index.ts导出router，然后main.ts导入并且传给Vue实例里

4. 注意Vue实例渲染的是App.vue。那我写在router里面的那些路径和对应component怎么用啊？

• 在App.vue的<template>标签里添加<router-view />，这就表示只要访问路径，就会把该路径的component展示在这个<router-view />地方