Vue 单页内使用router-link跳转,动态使用router.push()实现页内跳转，跳转到其他组件

最新推荐文章于 2024-05-28 09:45:00 发布
最新推荐文章于 2024-05-28 09:45:00 发布
阅读量6.1k 收藏 4
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42286670/article/details/81810508
版权

本文是不同的路由跳转对比说明，自己的理解之路，如有理解错误，望各位提点一二！！！！！

一、配置router中的index.js(使用npm命令创建的项目：router文件夹中是index.js)，配置（路由）如下：

//路由配置
import App from '../App'

export default [{
  path: '/',
  component: App, //顶层路由，对应index.html
  children: [ //二级路由。对应App.vue
    //页面为空的时候默认跳转到登录页
    {
      path: '',
      component: r => require.ensure([], () => r(require('../page/login')), 'login')
    },
    {
      path: 'register',
      component: r => require.ensure([], () => r(require('../page/register')), 'register')
    },
    {
      path: 'findpwd',
      component: r => require.ensure([], () => r(require('../page/findpwd')), 'register')
    },
    {
      path: 'home',
      component: r => require.ensure([], () => r(require('../page/home')), 'home')
    }],
}]

二、使用实现页内跳转（直接使用path跳转）

<router-link :to="{path:'register'}" style="font-size: 14px;color: orange;">立即注册</router-link>

1.对应的main.js设置

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/index.js'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './config/rem'

import header from './page/header.vue'
import footer from './page/footer.vue'

Vue.config.productionTip = false

Vue.component('header-vue', header)
Vue.component('footer-vue', footer)

Vue.use(VueRouter)
Vue.use(ElementUI)
const router = new VueRouter({
  routes
})
new Vue({
  router,
  store,
}).$mount('#app')

2.App.vue 代码如下：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

3.index.html代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>测试项目</title>
</head>
<body>
<div id="app">
  <router-view></router-view>
</div>
</body>
</html>

三、使用router.push()实现页内跳转，跳转到其他页面路由配置如下：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/page01',
      name: 'page01',
      component: page01,
      children: [
        {
          path: 'page01-a',
          name: 'page01A',
          component: page01A
        },
        {
          path: 'page01-b',
          name: 'page01B',
          component: page01B,
          children: [
            {
              path: 'end',
              name: 'pageEnd',
              component: pageEnd
            }
          ]
        }
      ]
    },
    {
      path: '/page02',
      name: 'page02',
      component: page02
    }
  ]
})

 

配置 path 的时候，以 " / " 开头的嵌套路径会被当作根路径，所以子路由的 path 不需要添加 " / " 

按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转，App.vue 只是作为一个存放组件的容器。

App.vue代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in links"><a @click="$goRoute(item.route)">{{item.text}}</a></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        links: [
          {
            text: '胡萝卜',
            route: '/home'
          },
          {
            text: '大白菜',
            route: '/page01'
          },
          {
            text: '水蜜桃',
            route: '/page02'
          }
        ]
      }
    }
  }
</script>

对应的main.js设置method：


// 路由跳转
Vue.prototype.$goRoute = function (index) {
  this.$router.push(index);
}

 特别提醒----push 后面可以是对象，也可以是字符串：

// 字符串
this.$router.push('/home/first')

// 对象
this.$router.push({ path: '/home/first' })

// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})

同样是push跳转另一个形式的demo：

1.router配置：

import App from '../App'

const register = r => require.ensure([], () => r(require('../components/register')), 'register');
const findpwd = r => require.ensure([], () => r(require('../components/findpwd')), 'findpwd');
const login = r => require.ensure([], () => r(require('../components/login')), 'login');
const home = r => require.ensure([], () => r(require('../components/home/home')), 'home');
const userInfo = r => require.ensure([], () => r(require('../components/home/UserInfo')), 'userInfo');
const homeService = r => require.ensure([], () => r(require('../components/home/ServicePage')), 'homeService');
const homeDefault = r => require.ensure([], () => r(require('../components/home/HomeDefault')), 'homeDefault');
const homeLeft = r => require.ensure([], () => r(require('../components/home/HomeLeft')), 'homeLeft');
const userInfoLeft = r => require.ensure([], () => r(require('../components/home/UserInfoLeft')), 'userInfoLeft');
const userClockInfo = r => require.ensure([], () => r(require('../components/home/userinfo/UserClockInfo')), 'userClockInfo');
const userCompanyInfo = r => require.ensure([], () => r(require('../components/home/userinfo/UserCompanyInfo')), 'userCompanyInfo');
const userWOs = r => require.ensure([], () => r(require('../components/home/userinfo/UserWOs')), 'userWOs');

export default [{
  path: '/',
  component: App, //顶层路由，对应index.html
  children: [ //二级路由。对应App.vue
    //页面为空的时候默认跳转到登录页
    {
      path: '',
      component: login
    }, {
      path: '/',
      redirect: App
    },
    {
      path: 'register',
      component: register
    },
    {
      path: 'findpwd',
      component: findpwd
    },
    {
      path: 'home',
      component: home
    },
    {
      path: '/home',
      // 你也可以在顶级路由就配置命名视图
      component: home,//加载到最外层的router-view
      children: [{//home子页面--用户信息
        path: 'home_user_userinfo',
        components: {
          left_router: userInfoLeft,//加载到内层router-view name=left_router
          right_router: userInfo,//加载到内层router-view name=right_router
        }
      },
        {//home子组件--公司信息
          path: 'home_user_companyinfo',
          components: {
            left_router: userInfoLeft,
            right_router: userCompanyInfo,
          }
        },
        {//home子组件--工单信息
          path: 'home_user_wos',
          components: {
            left_router: userInfoLeft,
            right_router: userWOs,
          }
        },
        {//home子组件--打卡信息
          path: 'home_user_clockInfo',
          components: {
            left_router: userInfoLeft,
            right_router: userClockInfo,
          }
        },
        {//home子组件--服务页【TAB】
          path: 'home_service',
          components: {
            left_router: homeLeft,
            right_router: homeService,
          }
        },
        {//home子组件--默认页【TAB】
          path: 'home_default',
          components: {
            left_router: homeLeft,
            right_router: homeDefault,
          }
        }
      ]
    },
  ],
}]

2.看下home.vue代码如下

<template>
  <div>
    <header-vue v-bind:userInfo='userInfo'></header-vue>
    <div id="bodybox" style="display:flex;flex-direction: column;">
      <div>
        <ul id="firstlist">
          <li>
            <router-link :to="{path:'/home/home_default'}" replace><span class="homespan def">首页</span></router-link><!-- 页内跳转 -->
          </li>
          <li>
            <router-link :to="{path:'/home/home_service'}" replace><span class="homespan ser">服务</span></router-link><!-- 页内跳转 -->
          </li>
          <li>
            <router-link :to="{path:'/home/home_user_userinfo'}" replace><span class="homespan per">个人</span>
            </router-link>
          </li>
        </ul>
      </div>
      <div style="width: 100%;background: lightgray;height: 1px;margin-top: 2px "></div>
      <div style="display: flex;flex-direction: row;">
        <div id="left" style="width: 220px;height: auto">
          <router-view class="leftRV" name="left_router"></router-view><!--子组件加载到--内层router-view-->
        </div>
        <div v-bind:style="hlineStyle"></div>
        <div id="right" style="width: 100%;height: auto;">
          <router-view class="rightRV" name="right_router"></router-view><!--子组件加载到--内层router-view-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import httpUtil from '../../http/httpRequestUtil'
  import store from '../../store/index'

  export default {
    name: "home",
    data() {
      return {
        userInfo: {},
        hlineStyle: {
          borderLeftColor: '#D3D3D3',
          borderLeftWidth: '1px',
          borderLeftStyle: 'solid',
          height: (document.documentElement.clientHeight - 95) + 'px',
        }
      }
    },
    created: function () {
      document.title = "欢迎来到你的世界";
      document.body.style.backgroundImage = "url(" + require("../../assets/home_bg.jpg") + ")";
      document.body.style.backgroundSize = 'cover';//背景覆盖全部
      document.body.style.backgroundAttachment = 'fixed';//背景图像固定
      document.body.style.backgroundRepeat = 'no-repeat';//背景不复制（平铺）
      document.body.style.backgroundPosition = 'center';//背景居中
    },
    methods: {}
  }
</script>

3.使用js动态跳转到其他页面，使用router.push()跳转

methods: {
      submit: function () {//提交登录
        var router = this.$router//赋值使用
        if (this.pwd.length == 0 && this.account.length == 0) {
          this.account = "13541354186"
          this.pwd = "00000000"
        }
        var pwd_sha1 = hex_sha1(this.pwd)

        var params = new URLSearchParams();
        params.append('username', this.account);
        params.append('password', pwd_sha1);
        params.append('type', '2');
        //这里用axios原生的去请求
        httpUtil.postData('api-login/login', params, function (data, message) {
          if (data != null) {
            store.commit("setUserUuid", data)
            var url = "api-common/user/getUserInfo";
            httpUtil.getData(url, function (userInfo, message) {
              if (userInfo != null) {
                console.log(userInfo)
                store.commit("setUserInfo", userInfo);
                router.push({path: '/home/home_default'})//页面跳转--加入history【使用router.replace()不加入history】
              }
            })
          }
        })
      }
    }

 

 

 

 

 

 

晓晓爱车
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由（router）---动态绑定
Always_Love的博客
04-02 2025
本篇介绍vue router的动态绑定。 动态传值。 之前一篇vue router基础讲了页面内路由的配置方法以及路由的入口，在这里就不多陈述了。 1、配置路由 2、路由入口 3、动态获取对象传值 mouted(){ this.$route.params; } 编程实现路由获取对象 gorouter() { this.$router.push("/"); //1.p...
vue push 键值是动态的_Vue-Router 使用和原理简单实现
weixin_42524792的博客
01-17 763
Vue Router 是 Vue.js 官方的路由管理器,可以让构建单页面应用变得易如反掌单页面应用(Single Page Application,SPA)应用只有一个完整的页面，它在加载页面时，不会加载全部页面，只加载一个首页的容器，其它页面的内容在首页容器某个位置，需要页面切换时只更新某个指定的容器中内容单页面应用的核心之一是：更新视图而不重新请求页面单页面应用不仅仅是在页面交互是无刷新的，...
Vue-router之页面跳转
最新发布
integermain的博客
05-28 1395
官方文档见：Vue Router 是Vue.js官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码。
Vue 2.x router部署 -- SPA 单页面应用
zfen0018的博客
06-20 268
SPA(single-page application--单页面应用)：一种网站应用的模型，动态重写当前的页面来与用户交互，而不需要重新加载整个页面。1.安装router插件 npm install vue-router@3.2.0 --save --vue2.x2. 创建路由模块文件 --src目录下创建router文件夹及index.js文件3.配置路由文件 --src/router/index.js 4.main.js入口文件中集成路由插件到vue 5.路由输出组件位置 --src/app.v
Vue-router：router-link、页面跳转
qq_43005779的博客
06-18 1967
router-link标签的属性补充、页面跳转 router-link除了to=""属性还有其他属性： tag属性：会按照我们想要的方式渲染成别的标签的样子<router-link to="/home" tag="button">首页</router-link> replace属性：在正常情况下vue使用history.pushState()来进行url的变更，但是有时我们不希望用户可以回退，所以要使用history.replace()来变更url，可以通过replace属性
vue-router 2.0 跳转之router.push()用法说明
10-14
在 Vue Router 2.0 版本中，`router.push()` 是一个核心方法，用于程序化地导航到新的 URL。这个方法使得开发者能够在运行时动态改变应用的视图，而不必依赖用户交互或 HTML 的 `<a>` 标签。 `router.push(location...
VueJs路由跳转——vue-router的使用详解
10-20
【VueJs路由跳转——vue-router的使用详解】 Vue.js是一个流行的前端JavaScript框架，用于构建用户界面，尤其适合单页应用程序。为了管理页面间的跳转和状态，Vue.js引入了vue-router作为官方的路由库。vue-router...
【JavaScript源代码】Vue router-view和router-link的实现原理.docx
12-29
总结起来，Vue Router 的 `<router-link>` 和 `<router-view>` 组件共同实现了SPA中的动态路由导航。`<router-link>` 负责创建可点击的导航链接，而 `<router-view>` 则根据当前路由呈现相应的组件。这种基于组件的...
详解vue-router 2.0 常用基础知识点之router-link
12-09
在Vue 2.0中，`router-link`组件是用于创建导航链接的关键元素，它与`router-view`配合使用，实现了单页面应用(SPA)的页面切换。 首先，我们来看`$route.params`。这是一个对象，存储了动态路径参数和全匹配片段。...
vue-router
weixin_30514745的博客
08-21 124
1.router.route <router-link :to="...">等同于调用router.push(...) 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如： // 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({...
React-Router link方式跳转
weixin_45966674的博客
11-02 782
这里需要将Link 和路由管理的组件放在同一个Router 不然就会有问题的。然后我们通过react路由和HashRouter方式 构建一个这样的组件。这里 我们可以通过输入页面路径来控制路由 但程序肯定不是让我们这样用的。观看本文要求了解React-Route的基本操作 和两种路由方式。我们先多引入一个react-router-dom中的Link组件。我们就来用一下第一种跳转路由的方式 link。此时 我们就可以通过点击进行界面的跳转了。然后修改Router标签中的代码如下。
Vue-router路由跳转的两种方式与路由传参的方法
qq_37635012的博客
06-02 3948
路由的两种跳转方式 路由跳转有两种方式：声明式和编程式。 我们之前用的< router-link :to="…">< /router-link>创建 a 标签来定义导航链接属于声明式。我们还可以借助 router 的如下这些实例方法创建编程式导航: router.push router.push(…)它就等同于< router-link :to="…"> router.push(…)这个方法会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前
vue组件之嵌套路由传参跳转？
TeroZhang的博客
10-12 1366
vue组件之嵌套路由传参跳转？ vue 路由传参的三种基本方式： 现有场景如下，点击父组件的li 元素，跳转到 子组件，并携带参数，便于子组件获取数据。 父组件中： <li v-for="article in articles" @click="getDescribe(article.id)"> 方案1： 去目标组件页 Methods中： goPage( 携带参数 ) { //...
Vue-Router嵌套路由children的使用
qq_45647792的博客
07-10 4153
嵌套路由就是父路由中嵌套他的子路由，父路由中有自己的路由导航和路由容器（router-link、router-view）（前者用于跳转，后者用于显示且必须位于父路由中）（前者可以没有，后者不能没有，否则进行跳转后路径会变化，但页面不发生变化）。嵌套路由使用于实现页中页效果，如若依框架中的首页、用户管理等页面的显示。
vue中局部页面跳转_vue 路由跳转&部分页面缓存&页面动画切换
weixin_30300027的博客
02-22 998
前言：此篇仅做记录。上一下原先的代码，实现路由跳转&页面动画切换，没做页面缓存，每个页面都要刷新(App.vue)*{margin: 0; padding: 0;}export default {data() {return {transitionName: ""}},watch: {'$route'() {if(window.$isBack != null){this.transitio...
Vue-router：二级路由跳转另一条路由下的子级
圆子mom的博客
09-12 1万+
前提 实验项目中，在一个 /list/user 列表中，当点击某一条时，需要跳转到 /detail/userId/user 详情下，展示详情信息。 router.js const routes = [ { path: '/ue/matter/list', name: 'list', component: List, children: [ { path: 'user', name: 'list-user', co
vue路由跳转及传参方式
qq_42383970的博客
08-24 107
1.直接在路由中传参 传参方式： this.$router.push({ path: `/childPage/${id}`, }) 需要对应路由配置如下： { path: '/childPage/:id', name: 'childPage', component: childPage } 获取参数：this.$route.params.id 2.通过路由属性中的name来确定匹配的路由，通过params来传递参数 传参方式：
Vue中this.$router.push（参数） 实现页面跳转
热门推荐
吴冬雪的博客
05-22 13万+
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用。页面通过path/name和query传递参数，该实例中row为某行表格数据。及通过路由配置的name属性访问。来修改 url，完成跳转。
vue-router实现页面路由跳转以及路由嵌套
05-18
在上面的示例中，我们分别演示了如何使用 `<router-link>` 组件和 `$router` 对象实现页面路由跳转，其中 `to` 属性表示跳转的目标路由地址。 此外，Vue Router 还支持路由嵌套的功能，可以通过嵌套路由的方式实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值