Vue 页面跳转方式 与 参数传递 编程导航

最新推荐文章于 2024-06-26 09:37:28 发布
最新推荐文章于 2024-06-26 09:37:28 发布
阅读量2.3k 收藏 7
点赞数 1
分类专栏： Vue.js 文章标签： vue页面跳转 this.$router.push vue页面传参 编程导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muguli2008/article/details/102789504
版权

首先：

要清楚的是：vue中都是单页面应用(SPA)居多，而所谓的页面跳转，也是通过history 或 hash 的方式找到对应的路由地址后，再进行重新渲染页面视图（可以测试一下，在window对象上挂载一个自定义属性，只要不刷新页面的话【当然也可以存放到本地存储如：cookie、storage之中】，然后不管在哪个页面 或 组件中都可以访问到该自定义属性，而这样就和vuex的效果就是类似啦），而不是真正的页面跳转。

一、标签跳转：<router-link> 映射路由：

1、不带参数跳转

<!-- home页面（首页） -->

<template>

    <!-- 在Vue中的<router-link>标签中，到页面最终还是转为<a>标签 -->

    <router-link to="/about">
        <button>打开关于我们 - 不带参数1</button>
    </router-link>

    <router-link :to="{path: '/about'}">
        <button>打开关于我们 - 不带参数2</button>
    </router-link>
</template>

 

2、带参数跳转 

<!-- home页面（首页） -->

<template>
    <router-link :to="{path: '/about', query: {id: 1024, name:'mupiao', age: 28 }}">
        <button>打开关于我们 - 带参数1</button>
    </router-link>

    <router-link :to="{name: 'About', params: {id: 1024, name:'mupiao', age: 28 }}">
        <button>打开关于我们 - 带参数2</button>
    </router-link>
</template>

 

3、接收参数

// About页面（关于我们）

<template>
      <section>关于我们</section>
</template>


<script>
export default {
    name: "About",
    data() {
        return {};
    },
    created() {
        // 在Vue实例被创建之后的钩子函数中，接收home页面传过来的参数

        // 以query方式接收参数：【query传递数据是通过URL传递的，类似ajax中的get方式】
        console.log(this.$route.query.id);      // 1014
        console.log(this.$route.query.name);    // mupiao
        console.log(this.$route.query.age);     // 28

        // 以params方式接收参数：【params方式，类似ajax中的post方式】
        console.log(this.$route.params.id);      // 1014
        console.log(this.$route.params.name);    // mupiao
        console.log(this.$route.params.age);     // 28
    }
}
</script>

 

 Vue常用路由配置规则：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'

// 抽离出在这个路由配置表中共用的页面视图，以方便多处使用
const Login = () => import(/* webpackChunkName: "Login" */ '../views/Login.vue');
const News = () => import(/* webpackChunkName: "News" */ '../views/News.vue');
const NotFound = () => import(/* webpackChunkName: "NotFound" */ '../views/NotFound.vue');

Vue.use(VueRouter);

const routes = [ 
  {
    path: '/', // 网站首页
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/regist',
    name: 'Regist',
    component: () => import('../views/Regist.vue')
  },
  {
    path: '/main', 
    name: 'Main',
    meta: {
      userauth: true // 开启用户鉴权（用户需登录后，才能访问）
    },
    component: Main,

    children: [ // 子路由
      {
        path: '/news/:id(\\d+)',
        name: 'News',
        meta: {
          userauth: true
        },
        component: News,

        children: [ // 第三级子路由
          {
            path: '/main/news/alert',
            name: 'Alert',
            component: () => import('../views/Alert.vue')
          },
          {
            path: '/card/:listId(\\d+)/list/:listId(\\d+)',
            name: 'Card',
            component: () => import('../views/Card.vue')
          }
        ]
      },
      {
        path: '/info/:id(\\d+)',
        name: 'Info',
        meta: {
          userauth: true
        },
        component: () => import(/* webpackChunkName: "Info" */ '../views/Info.vue')
      },
      {
        path: '/send',
        name: 'Send',
        meta: {
          userauth: true
        },
        component: () => import('../views/Send.vue')
      },

      // 默认显示的子路由
      {
        path: '',
        name: 'News',
        component: News
      }
    ],
  },
  {
    path: '/about',
    name: 'About',
    meta: {
      userauth: true
    },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/notfound',
    name: 'NotFound',
    component: NotFound
  },

  // 如果找不到对应的路由(页面)就显示404页面
  {
    path: '*',
    name: 'NotFound',
    component: NotFound
  }

];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  // 在进入路由前，判断到该路由需要鉴权（用户登录）则验证用户信息(!Store.state.user.userinfo 没有用户信息)，不通过则跳转到登录页。
  if (to.matched.some(matched => matched.meta.userauth) && !Store.state.user.userinfo) {

    next({ name: 'Login' });
  } else {

    next();
  }
});

export default router;

 显示子路由视图一定要加上 <router-view></router-view>

// Main主框架页面

<template>
  <Layout>

    <Header></Header>

    <Content>
      
      <!-- 显示子路由视图 -->
      <router-view></router-view>
    </Content>

    <Footer></Footer>

  </Layout>
</template>

<script>

import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "Main",
  components: {
    Header,
    Footer
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.ivu-layout {
  .ivu-layout-content {
    min-height: 88vh;
  }
}
</style>

 

 

二、编程式路由跳转： this.$router.push()

1、不带参数跳转

<!-- Home页面（首页） -->

<template>
    <router-link :to="{path: '/about'}">
        <button>打开关于我们</button>
    </router-link>

    <button @click="open">打开关于我们</button>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {};
    },
    methods: {
        open() {
            this.$router.push('/about');
        }
    },
}
</script>

 

2、带参数跳转

<!-- Home页面（首页） -->

<template>
    <router-link :to="{path: '/about'}">
        <button>打开关于我们</button>
    </router-link>

    <button @click="open1">打开关于我们 - query方式</button>
    
    <button @click="open2">打开关于我们 - params方式</button>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {};
    },
    methods: {
        // query方式
        open1() {  
            this.$router.push({
                path: '/about',
                query: {
                  id: 2048,
                  book: "了不起的Node.js",
                  job: "Web前端"
                }
            });
        },

        //⚠️注：如果要传递的参数很长时，请问params方式，因为query方式是通过URL传递的，而URL传参数长度是有限制的哦！！

        // params方式
        open2() {
            this.$router.push({
                name: "About", // ⚠️注：这里不能用path路径，只能用name【请对照router.js中的路由规则中的name项，还有就是一般首字母大写】，否则取不到传过去的数据
                params: {
                  id: 2048,
                  book: "了不起的Node.js",
                  job: "Web前端"
                }
            });
        }
    },
}
</script>

 

3、接收参数

// About页面（关于我们）

<template>
      <section>关于我们</section>
</template>


<script>
export default {
    name: "About",
    data() {
        return {};
    },
    created() {
        // 在Vue实例被创建之后的钩子函数中，接收home页面传过来的参数

        //⚠️注：在传递参数时，用什么方式传参，就用什么方式接收！！

        // 以query方式接收参数：【query传递数据是通过URL传递的，类似ajax中的get方式】
        console.log(this.$route.query.id);      // 2048
        console.log(this.$route.query.book);    // 了不起的Node.js
        console.log(this.$route.query.job);     // Web前端

        // 以params方式接收参数：【params方式，类似ajax中的post方式】
        console.log(this.$route.params.id);      // 2048
        console.log(this.$route.params.book);    // 了不起的Node.js
        console.log(this.$route.params.job);     // Web前端

        // this.$route 路由信息对象
        console.log(this.$route);  //this.$route 对象中包涵了路由的相关信息，请自看！！

</script>

 

 

 

真正的页面跳转：

一、HTML超链接跳转：<a href="http://www.xxx.com">跳转链接</a>

//打开外部链接
<a target="_blank" href="https://www.baidu.com/s?wd=Vue">百度一下 Vue</a>

 

 

二、浏览器BOM中的location.href跳转：

//在当前页面打开URL页面
window.location.href = "https://www.baidu.com/s?wd=Vue";

 

 

三、浏览器BOM中的window.open()跳转：

//打开一个新的浏览器窗口

window.open("https://www.baidu.com/s?wd=Vue", "_blank", "width=1000, height=500", true);

 

MuGuiLin
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue页面跳转---编程式导航
weixin_43117402的博客
04-23 994
编程式导航 除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 Router 的实例方法，通过编写代码来实现： 声明式 编程式 <router-link :to="..."> router.push(...) 注意，因为在 Vue 实例内部，可以通过 $router 访问 Route...
vue页面跳转传参
xcxcsdn的博客
01-28 1033
需求场景：搜索时点击搜索按钮跳转到搜索页面并带搜索关键字。如下图： 方式1：字符串传参： 1.params传参：不带问号，地址栏占位。 先在路由配置如下： { path:'/search/:keyword', component:Search, meta:{footShow:true} }, 页面如下： <div class="searchArea"> <for.
vue-router原理
零-J
05-22 6266
vue-router一、vue-router路由原理？二、两种路由模式1.hash模式：2.history模式路由跳转方式 一、vue-router路由原理？ 1.路由就是用来解析URL实现不同页面之间的跳转 vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式 const routes = [ { path: '/', redirect: '/rec
vue路由中的next()
weixin_45063953的博客
10-13 2198
注意：next('/logon')不是说直接去/logon'路由，而是中断（VUE中的中断就是此时不会执行router.afterEach(() => {}）这一次路由守卫的操作，又进入一次路由守卫，就像嵌套一样，一层路由守卫，然后又是一层路由守卫，此时路由守卫进入到第二层时，to.path已经不是/home了，这个时候才执行next()放行操作。因此你还需要确保在当addRoutes()已经完成时，所执行到的这一次beforeEach((to, from, next)中有一个正确的next()方向出口。
vue跳转页面的几种常用方法
最新发布
askuld的博客
06-26 1220
vue跳转页面的几种常用方法
vue-router进阶（router.beforeEach((to, from, next)，router.beforeResolve( to,from,next )）等等
LBOcean的博客
10-13 5814
router.beforeEach( to,from,next ) =>{ } router.beforeResolve( to,from,next ) =>{ } router.afterEach( to,from )=>{ }
VueRouter进阶（1）-导航守卫
weixin_34001430的博客
12-25 208
简介 主要用来通过跳转或取消的方式守卫导航。例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。 分为三大类：全局守卫、路由守卫、组件守卫 全局守卫 1. beforeEach 2. beforeResolve 3. afterEach 路由守卫 1. beforeEnter 组件守卫 1. befo...
vue-router使用next()跳转到指定路径时会无限循环
热门推荐
qq_43248623的博客
07-16 1万+
解释1 beforeRouteLeave (to, from, next) { console.log('离开路路由') if(to.fullPath==='/home'){ next(); }else{ next('/home') } 这个是组件路由，我想实现的效果是在这个页面点击浏览器的返回按钮后要返回 /home页面而不是上一个页面，上面的代码是没问题的，而我之前的写法就一直死循环 // 下面的写法会死循环
详解vue 路由跳转四种方式 (带参数)
10-17
- this.$router.push(): 一种编程式的导航方式，可以与router-link配合使用，或在JavaScript代码中实现路由跳转，并且同样可以携带params或query参数。 - this.$router.replace(): 与push()方法类似，但不会在...
vue跳转页面的几种方法(推荐)
10-15
通过以上介绍，我们了解了Vue中实现页面跳转的几种方法，包括router-link的声明式导航、this.$router.push的编程式导航、a标签的外部链接跳转，以及this.$router.go的历史记录操作方法。掌握这些方法将有助于我们在...
vue-router传递参数的几种方式实例详解
10-17
这是最简单的导航方式，通过字符串直接指定要跳转的路由路径，但不支持传递参数： ```javascript this.$router.push("home"); ``` #### 2. 对象方式 对象方式可以传递参数，分为两种类型：命名路由和查询参数。 ...
Vue this.$router.push(参数)实现页面跳转操作
10-14
在进行页面跳转时，如果需要传递参数，有两种主要的参数传递方式：`params`和`query`。 - 使用`params`传递参数通常与命名路由配合使用。在目标页面组件中，可以通过`this.$route.params`获取传递的参数。例如，在...
Vue编程式跳转的实例代码详解
10-16
编程式跳转是Vue.js中实现路由跳转的一种方式，它允许开发者在JavaScript代码中直接控制路由，而不是仅仅使用声明式导航。 首先，Vue.js中的编程式跳转可以通过this.$router对象来实现。this.$router是VueRouter的...
vue-router传递参数的方法
she_jw的博客
05-06 590
1、vue-router传递参数的方法 vue-router传递参数分为编程式和声明式： 1.1 编程式： router.push 使用编程式的导航传递参数时有两种类型，分别是字符串和对象： 1.1.1 字符串 this.$router.push("/"); this.$router.push("Login"); 跳转的页面命名为Login，页面链接是’/’,所以上面两种写法都是OK的 这种方...
vue ——Vue-router
weixin_46282323的博客
11-29 345
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。
vueRouter 组件间的传递参数和接受参数
weixin_44744501的博客
10-12 173
vue-router
Vue中模块化路由之后，添加路由守卫beforeEach之后，next传递参数会陷入死循环的问题
wusu0wei的博客
11-14 3321
next传递参数的时候出现的递归问题 本来想做一个测试，写了一个简单的登录注册，想着判断一下登录的token之后做一个路由跳转，但是在router.beforeEach((to,from,next)=>{next()})是可以正常跳转的，但是只要next传递参数的时候就会出现如下的错误： router.beforeEach((to,from,next)=>{ next('/reg') }) RangeError: Maximum call stack size exceeded 大概查了一
router传参接参（详细）router.beforeEach()
weixin_58431406的博客
06-22 8874
方法一：使用query来传递参数 1.传参this.$router.push({path: ‘/’, query: {参数名: ‘参数值’}) 2.接参this.$route.query.参数名。方法二：使用 params 1.传参this.$router.push({path: ‘/’, name: ‘’, params: {参数名: ‘参数值’}) 2.接参this.$route.params.参数名 .........
vue-router(路由原理、路由守卫、传参)
m0_63165596的博客
12-29 1306
路由原理 路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。 hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash， hash不会重加载页面。， 即使没有做到对路由的全覆盖，也不会返回404 错误。 history模式：可以对浏览器历史记录栈进行修改,监听到状态变更。 特点: history 前端的URL 必须和实际向后端发起请求的URL一致，不然将返回404 错误。 路由传参： 三种： ...
vue如何通过导航菜单跳转页面
05-17
在 Vue 中通过导航菜单跳转页面可以使用 Vue Router 来实现。 首先，需要在项目中安装 Vue Router： ``` npm install vue-router --save ``` 然后在 `main.js` 中引入并使用 Vue Router： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import Home from './views/Home.vue' import About from './views/About.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes // short for `routes: routes` }) new Vue({ router, render: h => h(App), }).$mount('#app') ``` 在上面的代码中，我们定义了两个路由，分别是 `/` 和 `/about`，并分别对应着 `Home` 和 `About` 组件。然后通过 `VueRouter` 创建了一个路由实例，并将其传递给 `Vue` 实例中。 接下来，在项目中创建导航菜单，在导航菜单中使用 `router-link` 组件来实现页面跳转： ```html <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> ``` 在上面的代码中，我们通过 `to` 属性来指定跳转的路径。当用户点击导航菜单中的链接时，路由会根据路径自动渲染对应的组件。 除了使用 `router-link` 组件，我们还可以使用编程式导航来实现页面跳转。例如，在组件中可以使用 `$router.push` 方法来进行跳转： ```javascript // 在组件中跳转到 /about 页面 this.$router.push('/about') ``` 以上就是在 Vue 中通过导航菜单跳转页面的基本实现方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值