Vue学习笔记之Vue中的路由使用

路由嵌套

在router.js中，添加对应路由：

在html中添加路由view：

对应的跳转路由地方，添加router-link：

路由重定向

在路由配置文件中，使用redirect即可。

对应的页面：

路由传递参数

1、参数传递方式一

1. 路由中配置参数：

    2. 传递参数：

   3. 页面接收参数：

界面显示效果：

2、参数传递方式二

1. 配置路由参数

2. 传递参数

3. 获取参数

效果：

方式一：传递参数单一。

方式二：可以传递多个参数。

路由守卫，钩子函数

进入路由执行的方法

准备进入路由前的方法：

beforeRouteEnter: (to, from, next) => {
    console.log("准备进入页面")
    next(
        console.log("进入页面了，执行某个函数")
    );
}

控制台输出：

离开路由执行的方法

beforeRouteLeave: (to, from, next) => {
    console.log("准备离开页面")
    next(
        console.log("离开页面了，执行某个函数")
    );
}