在讲name属性之前我们需要知道以下几点：
{
path:'/todolist',
name:'ToDoList',
component:()=>import('../views/todoList.vue')
}
1.在单页面应用中，网页具体路径显示由router中的path来决定，path设置是什么就显示什么，和name无关；
2.不同路由下的页面渲染的内容是根据components所对应的组件来进行渲染的，和name无关
3.name属性就相当于给path起了一个别名，方便使用，但是不一定非要设置name，不设置，默认值是default。
注意：在我们页面跳转的传参的时候使用params传参，在路由里也一定要使用，来匹配对应参数，不然在刷新页面的时候参数会丢失（或者可以使用query来传参数，刷新不丢失）
router里name属性几种常用用途：
1.指定页面路由，并传递参数
{
path:'/todolist/:id',
name:'ToDoList',
component:()=>import('../views/todoList.vue')
}
<!-- <router-link :to="{ name: 'ToDoList', params: { id: 100 } }">
todolist
</router-link> -->
<div @click="$router.push({ name: 'ToDoList', params: { id: 123 }})">
测试跳转传参
</div>
其实在这里使用<router-link to="/Liantong">
同样可以实现页面导航跳转，但是这样的话就不能直接传递params参数了。
2.获取组件的name值,以供页面使用
{
path:'/todolist',
name:'我是ToDoList的name',
component:()=>import('../views/todoList.vue')
}
<div>{{ $route.name }}</div>
当针对不同页面渲染不同菜单并显示菜单名的时候，我们可以把菜单名赋值给路由name，然后进行相应处理
3.同个路由，渲染多个视图
有时候，我们对于一个路由，采用多个视图来渲染，此时就需要视图name值来进行区分。
不过在路由对象中要把component 改为components对象
{
path: '/todolist',
name: 'Todolist',
components: {
default: () => import('../views/todolist1.vue'),
//default是router-view默认名字，router-view中name省略不写
Todolist2: () => import('../views/todolist2.vue'),
Todolist3: () => import('../views/todolist3.vue')
}
}
<router-view></router-view> //渲染todolist1组件
<router-view name="Todolist2"></router-view> //渲染todolist2组件
<router-view name="Todolist3"></router-view> //渲染todolist3组件
⚠️vue中name使用和vue-router中name使用没有直接联系，是两个概念
