精华内容
下载资源
问答
  • vue路由跳转子组件_vue跳转到子路由子路由的组件页面无法滚动?
    2021-03-16 16:39:36

    原来是在整个项目的引用main.js中有个父容器overflow:hidden

    更多相关内容
  • 举个栗子,导航栏如下图,当前新闻资讯的路由是:localhost:8083/#/new,导航栏样式如图所示: 随便挑个新闻点击后会跳转到子路由:localhost:8083/#/new/newDetail,这时候新闻资讯的主路由style样式出现消失的...
  • 分析:动态路由写的没问题,大概是问题出在路由寻址时找不到具体的组件 解决:根据分析定位问题可能出在路由表上,仔细检查一下路由表,发现动态路由的参数没加,解决如下图: 加上尾巴上的参数:id,成功跳转显示...

    细节解决成败,一个小疏忽就会导致花费大量的时间去定位BUG:

    问题:如题,控制台没有报错

    分析:动态路由写的没问题,大概是问题出在路由寻址时找不到具体的组件

    解决:根据分析定位问题可能出在路由表上,仔细检查一下路由表,发现动态路由的参数没加,解决如下图:

    加上尾巴上的参数:id,成功跳转显示相应内容
    在这里插入图片描述

    展开全文
  • Vue路由跳转

    2021-03-07 07:25:03
    组件中:methods:方案一:getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转this.$router.push({path: `/describe/${id}`,})方案一,需要对应路由配置如下:{path: '/describe/:id',name: 'Desc...

    现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。

    父组件中:

    methods:

    方案一:

    getDescribe(id) {

    // 直接调用$router.push 实现携带参数的跳转

    this.$router.push({

    path: `/describe/${id}`,

    })

    方案一,需要对应路由配置如下:

    {

    path: '/describe/:id',

    name: 'Describe',

    component: Describe

    }

    很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

    $route.params.id

    方案二:

    父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

    this.$router.push({

    name: 'Describe',

    params: {

    id: id

    }

    })

    对应路由配置: 注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。

    {

    path: '/describe',

    name: 'Describe',

    component: Describe

    }

    子组件中: 这样来获取参数

    $route.params.id

    方案三:

    父组件:使用path来匹配路由,然后通过query来传递参数

    这种情况下 query传递的参数会显示在url后面?id=?

    this.$router.push({

    path: '/describe',

    query: {

    id: id

    }

    })

    对应路由配置:

    {

    path: '/describe',

    name: 'Describe',

    component: Describe

    }

    对应子组件: 这样来获取参数

    $route.query.id

    这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是

    $router 这很重要~~~

    展开全文
  • 模式vue-router中的模式选项主要在router实例化的时候进行定义的,如下const router = new VueRouter({mode: 'history', // 两种类型history 还有 hashroutes: routes // 可以缩写成routes})有两种模式可供选择,...

    模式

    vue-router中的模式选项主要在router实例化的时候进行定义的,如下

    const router = new VueRouter({

    mode: 'history', // 两种类型history 还有 hash

    routes: routes // 可以缩写成routes

    })

    有两种模式可供选择,history 和 hash,大致对比一下,

    模式

    优点

    缺点

    hash

    使用简单、无需后台支持

    在url中以hash形式存在,不会传到后台

    history

    地址明确,便于理解和后台处理

    需要后台配合

    hash模式对于后台来讲就是一个url,因为地址中的hash值是不会传到后台的,所以服务器端做一个根地址的映射就可以了。

    history模式最终的路由都体现在url的pathname中,这部分是会传到服务器端的,因此需要服务端对每一个可能的path值都作相应的映射。或者采用模糊匹配的方式进行映射。

    除此之外,history模式下,如果后端不是一对一的进行映射,而是模糊匹配的话,那么就要注意一下404的情况了。这个时候就需要在前端router中定义404页面了。

    404路由的定义

    由于router本身的匹配是从上到下的,如果在前面找到了匹配的路由,就跳转了。因此可以直接在最后添加404的路由,如下

    dbf0761d719feaf8ce5e62b4c44b780d.gif

    let routerConfig = [{

    path: '/pages',

    component: App,

    children: [{

    path: 'demo/step1/list',

    component: coupon,

    name: 'coupon-list',

    meta: {

    title: '红包'

    }

    }]

    }, {

    path: '*',

    component: NotFound,

    name: 'notfound',

    meta: {

    title: '404-页面丢了'

    }

    }]

    842f1d61748cd054fcdba54bebf9230e.gif

    在前面匹配不到的时候,* 代表全部,就是都指向404页面

    路由钩子

    路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的,靠。。好拗口啊。

    总体来讲vue里面提供了三大类钩子

    1、全局钩子

    2、某个路由独享的钩子

    3、组件内钩子

    全局钩子

    顾名思义,全局钩子全局用,使用如下

    342e1254c95e9eccbf79396bf9fb3f46.gif

    const router = new VueRouter({

    mode: 'history',

    base: __dirname,

    routes: routerConfig

    })

    router.beforeEach((to, from, next) => {

    document.title = to.meta.title || 'demo'

    if (!to.query.url && from.query.url) {

    to.query.url = from.query.url

    }

    next()

    })

    router.afterEach(route => {

    })

    e09fec8da5e74ac35517c9209ee70faf.gif

    某个路由独享钩子

    就像说的一样,给某个路由单独使用的,本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是,这里的一般定义在router当中,而不是在组件内。如下

    aeaf5cb3b3e83a1ae80712a97f27bf39.gif

    const router = new VueRouter({

    routes: [

    {

    path: '/foo',

    component: Foo,

    beforeEnter: (to, from, next) => {

    // ...

    },

    beforeLeave: (to, from, next) => {

    // ...

    }

    }

    ]

    })

    d89afa29834a26996a552fe1f10662ca.gif

    组件内钩子

    首先看一下官方定义:

    你可以在路由组件内直接定义以下路由导航钩子

    beforeRouteEnter

    beforeRouteUpdate (2.2 新增)

    beforeRouteLeave

    路由组件!路由组件!路由组件!重要的事情说三遍,大家一定要注意这里说的是“路由组件”,而路由组件!== 组件,路由组件!== 组件,路由组件!== 组件!之前一直没注意这点,然后在子组件里面傻乎乎的调钩子函数发现一直没用。。。

    我们先来看一下什么是路由组件?

    路由组件:直接定义在router中component处的组件

    也就是说router中定义的入口vue文件之外的组件,是没有钩子函数的,也就不用说使用了。但是如果你使用了并不会报错,只是没反应。(本想画个图的,太懒了。。。自己理解理解吧,很好理解的)

    这里再回头看下这个路由内钩子是怎么用的,很简单和data、method平级的方法

    d9b04c3a9637e4a12863dabc013f8572.gif

    beforeRouteLeave(to, from, next) {

    // ....

    next()

    },

    beforeRouteEnter(to, from, next) {

    // ....

    next()

    },

    beforeRouteUpdate(to, from, next) {

    // ....

    next()

    },

    computed: {},

    method: {}

    17b16053f4177e21bb9c8b89beafe941.gif

    三种路由钩子中都涉及到了三个参数,这里直接上官方介绍吧

    to: Route: 即将要进入的目标 路由对象

    from: Route: 当前导航正要离开的路由

    next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

    next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

    next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

    next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

    tips:

    beforeRouteEnter是新进入的一个路由,比如进入/login登录界面,会触发beforeRouteEnter这个钩子;

    而beforeRouteUpdate是路由更新时触发,从主页进入登录界面不会触发这个钩子函数,一个父路由下的子路由跳转会触发这个钩子函数。

    展开全文
  • Vue实现路由跳转和嵌套

    千次阅读 2020-12-24 15:40:25
    Router用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装cnpm i vue-router -D安装完成后,在 src 文件夹下,创建一个 routers.js 文件,和 main.js 平级然后在 router.js 中引入所需的组件,...
  • vue路由跳转不刷新

    2020-12-24 15:40:29
    因为路由主体没变,变的只是传递的参数id所以从'game-detail?id=1'到'game-detail?id=2',并没有跳转。但是可以在watch里监听$route,监听到id的变化。后来我就在watch里边监听路由,点击后……重新调用了获取页面...
  • 主要为大家详细介绍了vue路由跳转实现tab选项卡,完成一个简单的tab选项卡布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 歌手组件是获取一个歌手列表,点击歌手跳转到子路由,歌手的所有歌曲singer-detail组件,singer-detail组件内引用了一个music-list组件,music-list组件包括一个标题栏和一个song-list组件,song-list组件是是该歌手...
  • Vue Router可以实现路由的切换,也就是组件之间的切换,它不同于传统页面的切换,所以在使用的时候经常会出现路由已经切换,但是组件没有更新的问题(只要实现对页面的刷新,组件就会重新进行加载): 一、 问题呈现 &...
  • 这里写目录标题第1部分:启动项目第2部分:组件2.1 定义组件component2.2 注册组件components2.3 独立标签(呈现页面)第2部分:变量2.1 return变量2.1 导出变量(别人引用)2.2 导入变量(必须已导出)2.3 导入变量...
  • vue-router 之动态路由vue-router官网上面是这样说的// 带查询参数,变成 /register?plan=privaterouter.push({ path: 'register', query: { plan: 'private' }})然后,我就这样写了:this.$router.push({path:'...
  • vue路由根据条件跳转到不同的子路由
  • 一级路由(personal.vue): <template> <div id="app"> <div> <h4 class="routerStyle"> <router-link to="/personal/personalwork"><span>作品管理</span></...
  • 1.菜单用的是elementui的menu组件,index的值不能重复 2.如果index没重复,但还是不变。试着在APP.vue里面的routerview标签加上key
  • 1. 路由配置 子路由的path不要加/ showfater用于显示隐藏父路由内容 { path:"/index", component:Index, name:"index", children:[ path:"child", component: Child, name:"child", meta:{ showfater: ...
  • 编程式路由导航借助v-on和this.$router中的push、replace、back、forward、go,来实现编程式路由导航,不借助<router-link>
  • 原因:vue-router的切换不同于传统的页面切换,而是路 由之间的切换,其实就是组件之间的切换,引用相同组件的时候,会直接调用缓存而不会调用created(),mounted()函数。 解决方法: 第一种:在watch中监听路由变化...
  • vue路由跳转问题

    千次阅读 2018-12-27 15:29:06
    问题大概是这样的,我...import Vue from 'vue' import ElementUI from 'element-ui' // import '../stastic/element-ui2.4.9-index.css' import 'element-ui/lib/theme-chalk/index.css' import VueRouter from ...
  • //cli4路由设置的path中只有"/"的话 URI为空是就会自动重定向 path: '/', name: 'Home', component: Home, //配置子路由 children: [ { //子路由不需要加/ path: 'news', name: 'new
  • 关于vue路由嵌套时父子路由高亮显示的问题 背景 基于@vue-cli 4.4.6新创建了一个项目,在about页面中引入二级路由配置 ![app.vue中的模板布局](https://img-blog.csdnimg.cn/20200730171713532.png) ![about.vue中的...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 141
精华内容 56
热门标签
关键字:

vue路由跳转子组件