vue各种路由跳转

目录

1.返回上一个页面

2.使用 组件：

3.使用命名路由：

4.使用编程式导航：

4.使用重定向：

5.携带参数跳转

6.新的组件接受参数

---

1.返回上一个页面

this.$router.go(-1);

2.使用 <router-link> 组件：

        Vue Router 提供了 <router-link> 组件来实现路由导航。你可以在模板中使用 <router-link> 标签来创建链接，并指定目标路由的路径。例如：

<router-link to="/about">About</router-link>

3.使用命名路由：

        如果你在定义路由时给路由起了一个名字，你可以使用该名字来进行页面跳转。例如

this.$router.push({ name: 'about' });

4.使用编程式导航：

        Vue Router 也提供了编程式导航的方式，通过 JavaScript 代码来进行页面跳转。你可以使用 $router.push 方法来跳转到指定的路由路径。例如：

this.$router.push('/about');

4.使用重定向：

        你可以在路由配置中设置重定向，当用户访问某个路径时，会自动重定向到另一个路径。例如

{
  path: '/home',
  redirect: '/dashboard'
}

5.携带参数跳转

this.$router.push({
    path: '/bookCata',
    query: {
        paramName: this.$route.query.paramName,
        paramDept: this.$route.query.dept,
        paramTel: this.$route.query.tel,
        paramLoc: this.$route.query.loc
    }
});

6.新的组件接受参数

created() {
            console.log(this.$route.query.paramName);
            console.log(this.$route.query.paramDept);
            console.log(this.$route.query.paramTel);
            console.log(this.$route.query.paramLoc);
            console.log(this.$route.query.paramCata);
},