持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情juejin.cn/post/714765…
很多时候小伙伴们都不知道该用$route还是$router，只要记住下面这句话，相信对你在使用路由的时候就会有很大的帮助。
$route里存的都是路由的一些数据$router里都是一些方法，它是我们创建出来的路由对象。
编程式导航
- 简单来说就是调用方法来切换组件。
- 语法如下：
- 利用
$router.push()方法，进行编程式导航跳转，通常都是做一些业务逻辑的时候使用它。 - 利用
$router.replace()方法，也是编程式导航，只是它没有了历史记录。
命名视图
- 当一个页面有多个路由导航按钮，点击不同按钮，渲染不同的多个组件，这时候就需要用到命名视图。
- 具体代码如下：
上面两个<button>是编程式导航，<router-view/>就是出口这里，不同的<router-view/>的位置渲染不同的组件，所以就需要给视图组件添加name属性，然后在做路由配置的时候，component的值就写成为一个对象，不同的name值对应我们想具体渲染的组件，如下图：
上面的
components的属性值left和right是路由视图name的属性值。
如果子组件的components对应不同的组件，也可以向上面这样写
重定向
1、 直接加redirect，值为要跳转的路径。
{
path:'/about`,
redirect:'/',
component:About,
}
2、可以设置的它值为一个对象，使用对象的话，就使用name属性
{
path:'/about`,
redirect:{name:'/'},
component:About
}
3、值为一个回调函数，返回一个对象，该函数接收一个参数to。通常在该函数里添加一个判断，return回去的都是一个重定向的地址。
{
path:'/about`,
component:About,
redirect:to =>{
在return之前可以判断token是否正确
return {name:'/'}},
}
别名
通过alias属性设置别名
{
path:'/a',
component:A组件,
alias：'/b'，//该方法就是设置别名。地址栏里的a和b路径，都会跳转到A组件
}
