标签: vue-router

我可以在router-link标签中包装或附加button标签吗？

当我按下按钮时,我希望它将我转到所需的页面.

我使用vue-cli生成了一个项目.我看到项目有一个App.vue,这是应用程序的主要布局 - 如果我没有弄错的话.在这里,我把我的基本HTML布局和<router-view></router-view>.现在的问题是我需要完全不同的登录布局(不同的包装器,正文有不同的类)但我无法改变它,因为App.vue有一个模板,有点"固定"作为布局.如何处理这个问题？有推荐方式吗？

我应该创建代表布局的新组件,所以在这种情况下我的App.vue模板只有<router-view></router-view>,然后LoginLayout.vue会包含在其中吗？

我正在开发一个带有vuejs的网站,此时我遇到了麻烦,我需要从这个网站上获取网址查询(页面),例如这个网站webitename.com/user/?page=1但是this.$router.query.page得到了一个错误(未捕获的TypeError:无法读取undefined的属性"page"

有人知道这个问题,可以帮助我吗？

PS:我可以使用设置查询页面

this.$router.push({name: 'userIndex', query: { page: '123' } });

我可以得到像这样的url normal params

userID -> (websitename.com/user/:userId | websitename.com/user/1)

但我无法获得任何查询参数

我在这个拉动请求中看到:

• 添加router.reload()

  重新加载当前路径并再次调用数据挂钩

但是当我尝试从Vue组件发出以下命令时:

this.$router.reload()

我收到此错误:

router.reload()

我搜索了文档,但找不到任何相关内容.vue/vue-router提供者有这样的功能吗？

我感兴趣的软件版本是:

"vue": "^2.1.0",
"vue-router": "^2.0.3",

PS.我知道Uncaught TypeError: this.$router.reload is not a function是其中一个选择,但我正在寻找一个原生的Vue选项.

我的页面目前有Navigation.vue组件.我想让每个导航悬停并激活."悬停"有效,但"有效"则无效.

这是Navigation.vue文件的样子:

<template>
    <div>
        <nav class="navbar navbar-expand-lg fixed-top row">

                    <router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link>
                    <router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link>
                    <router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link>
                    <router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link>
        </nav>
    </div>
</template>

以下是风格.

<style>

   nav li:hover,
   nav li:active{
      background-color: indianred;
      cursor: pointer;
    }

</style>

这就是现在悬停的样子,并且在活动时预期完全相同.

如果你给我一个关于样式路由器链接活动作品的建议,我将不胜感激.谢谢.

好的,简单地解释一下:

我有3x页面.

• 第1页(首页)
• 第2页(菜单)
• 第3页(关于)

第1页有 -

<router-link  to="/menu">

点击的按钮路由到"/ menu".

目前,第2页(菜单)有一个

<router-link  to="/">

按钮,单击此按钮时,它将恢复到之前的位置"/"Page 1(Home).

但我不想为每个页面创建路由器组件以"返回"到上一页(就好像我有100页这可能是很多工作路由回来).有没有办法用vue-router做到这一点？类似于window.history.back()

很想知道是否有办法这样做,因为我在文档中找不到它.

提前致谢!约翰

假设我有一个像这样的Vue.js组件:

var Bar = Vue.extend({
    props: ['my-props'],
    template: '<p>This is bar!</p>'
});

我希望在vue-router中的某些路由匹配时使用它:

router.map({
    '/bar': {
        component: Bar
    }
});

通常,为了将'myProps'传递给组件,我会做这样的事情:

Vue.component('my-bar', Bar);

并在HTML中:

<my-bar my-props="hello!"></my-bar>

在这种情况下,路由器在路由匹配时自动绘制路由器视图元素中的组件.

我的问题是,在这种情况下,我如何将道具传递给组件？

如何在vue-router定义的页面(组件)之间实现淡入淡出效果页面转换？

我正在尝试重定向到使用router.beforeEach全局挂钩未找到的页面上的404.html ,但没有太大成功(使用Vue和Vue-Router1.0):

router.beforeEach(function (transition) {
    if (transition.to.path === '/*') {
        window.location.href = '/404.html'
    } else {
        transition.next()
    }
});

404.html插入不存在的路径时,这不会重定向到页面,只是给我一个空片段.只有在硬编码some-site.com/*时,它才会重定向到预期的some-site.com/404.html

我确信这里有一些非常明显的东西,我忽略了,但我无法弄清楚是什么.

请注意,我正在寻找的是重定向到新页面,而不是重定向到另一个路由,这可以通过使用router.redirect这些片段轻松实现:

router.redirect({
    '*': '404'
})

在我身上router.map,我可以拥有以下内容:

 router.map({
    '/404': {
        name: '404'
        component: {
            template: '<p>Page Not Found</p>'
        }
    }
})

我试图使用vue路由器创建一个简单的菜单,id喜欢迭代所有路由并显示在我的菜单中,目前我在我的组件中使用下面的实例方法,但我只是得到一个函数,我将如何迭代获取单独的路由？

methods : {
 getMenuLinks: function() {

        var t = this.$router.map() ;
        //t returns a vue object instance
        return t._children ;
        // did not know how to iterate this 
   }

 }

我想迭代所有maped路由以获得类似于每个映射路由的下面的内容:

<a v-link="{ path: 'home' }">Home</a>