标签: vue-router

我正在尝试为我的孩子路线定义 beforeEnter 守卫，但我没有成功。这是我的路由配置：

  ...
  {
    path: '/',
    component: App
    beforeEnter: (to, from, next) ->
       # This block is only reached when I refresh the page

    children: [
      {
        name: 'component1',
        path: '/component1',
        components: component1
      },
      {
        name: 'path2',
        path: '/path2',
        components: component2
      },
     ...
    ]
  }
  ...

当我刷新页面或直接在浏览器上插入 url（例如：base_path/path2）时，一切正常。但是当我单击重定向到路径 1 或路径 2 的路由器链接时，beforeEnter 防护不会执行。

我理解错了吗？我是否需要为每个孩子设置 beforeEnter 守卫？

我有两条具有相同组件的路径，如下所示：

/:loc("-host") - 应该匹配 /usa-host

/:loc/:sublocation("-host") - 应该匹配 /usa/washington-host

如何在 vue.js 中使用单个命名路由来实现这一点

我正在尝试使用 Vue-Router 在我的新项目中对 URL 进行模式化，因此它们看起来就像现有（非 Vue）应用程序中的 URL。现有的应用程序 URL 如下所示：

• /#!page1
• /#!page2

我的 Vue Router 目前看起来像这样：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/page1'
    },
    {
      path: '/page1',
      component: Assessments
    },
    {
      path: '/page2',
      component: Assessments
    }
  ]
})

但是，当然，这会生成如下所示的 URL：

• /#/page1
• /#/page2

如何配置我的路由器以模仿该/#!route模式？

我有一个侧边菜单，我不想在登录/注册页面中显示它，我需要在几乎所有其他页面中显示它。我该怎么做？

<div id="app ui container">
    <Menu/>
    <router-view/>
</div>

在我的网站上，我有一个导航，其中包含一些类别和嵌套的导航锚点。如何在 vue-router 中对这些路由进行分组？我想出的最好的方法是为每条路线放置一个元数据，然后按它分组。

问题：我有一个组件，它需要一个布尔值作为从视图应用程序内部和外部应用程序调用的一部分可选地传递给它。当我直接调用路由器时，我可以毫无问题地传递布尔值，但如果我使用实际 URL 进行路由，则会收到解析警告。为了防止出现警告，我应该使用字符串并自己解析吗？

路由器：

export default new Router({
  routes: [
    {
      path: '/foo',
      name: 'Foo',
      component: Foo,
      props: (route) => ({ booleanParam: route.query.booleanParam })
    }
  ]
})

成分：

<template>
    <div>
        BooleanParam: {{booleanParam}}
    </div>
</template>

<script>
export default {
    name: 'Foo',
    props: {
        booleanParam: {
            type: Boolean,
            required: false
        }
    }
}
</script>

作品：

router.push( { name: 'Foo', query: { booleanParam: true } })

产生警告：

http://localhost:8080/foo?booleanParam=true

警告：

[Vue 警告]：无效的道具：道具“booleanParam”的类型检查失败。预期布尔值，得到字符串。

我在使用 Apache（也是 HTTPs）部署 vue 应用程序（没有数据库也没有服务器端代码）时遇到问题。这是我的 .conf 文件：

<VirtualHost *:80>
ServerAdmin myemail@gmail.com
ServerName mydomain.me
ServerAlias www.mydomain.me
DocumentRoot /var/www/mydomain.me/dist
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

<Directory /var/www/mydomain.me/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

RewriteEngine on
RewriteCond %{SERVER_NAME} =mydomain.me [OR]
RewriteCond %{SERVER_NAME} =www.mydomain.me
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

当我访问 mydomain 时，首页已正确加载（使用 构建的 index.html npm run build），但是没有任何路由工作（即 /portfolio）。

但是，如果我将路由器模式从 切换history到hash，则一切正常 ( /#/portfolio)，但我想保持history模式处于活动状态。

提前致谢！

我有一个用例需要 vue 路由的 id 部分包含未转义的正斜杠。

我目前的路线是这样的：

{
    path: '/browse/:path*',
    component: browse,
    name: 'browse',
    displayName: 'Browse',
    meta: { title: 'Browse' },
},

因此，当用户浏览到上述 url 时，就会显示浏览组件。

但是，我想使用路径 ( :path*)的 id 部分来包含一个可嵌套的文件系统，例如我的浏览页面将使用的路径。

例如，该 url/browse/project/project1会将我的树中的两个级别带到 project1 项目。

现在，我跑入的问题是，编程导航时VUE路由器逃避IDS我（路），和我的URL最后是这样的：/browse/project%2Fproject1。这是不理想的，对最终用户来说也不好看。此外，如果用户确实/browse/project/project1手动浏览到该应用程序将正常工作，甚至在 url 栏中保留原始编码。

所以我可以通过创建任意数量的子路径来解决这个问题，并希望系统永远不会超过这些，但这不是解决我的问题的好方法。

我还应该澄清一下，应用程序将不知道任何关于路径的信息，/browse因为它是由为应用程序提供动力的 api 动态生成的。

vue-router 中是否有本地方式来处理这个问题？或者我应该改变我做事的方式。

我使用Vue-cli安装VUE路由器，在我的App.vue我有<router-link to="/about" >About</router-link>其中这将显示有关组件的上点击的内容。现在，我想将 props 数据About.vue从 ``App.vue传递给组件。在里面添加 :myprops="myprops"<router-link to="/about" :myprops="myprops">About</router-link>不起作用，这就是为什么我将以下内容添加到App.vue：

<script>
import About from './components/About.vue';
export default {
  name: 'App',
 components:{'my-about':About}
  data(){return {...}
  },
props:{myprops:[{.....}]}
}
</script>

在About.vue组件内部，我是props:['myprops']为了获取道具数据并使用{{myprops}}它来显示它。现在，如果在里面App.vue，我添加<my-about :myprops="myprops"></my-about>然后道具数据将被移交About.vue并显示，但About.vue也将显示在我的App.vue页面上，并且它会在里面重复About.vue。我不想要那个。我只需要将myprops数据传递给About.vue组件而不显示About.vue里面的内容App.vue。而且，这是我里面的路径代码router/index.js供参考： { path: '/about', component: About }

我怎么能做到这一点？

我正在尝试使用 Vue 和 Vue Router（使用历史模式）滚动到页面上的锚点。

在索引页上时，滚动行为通过跳转到该部分按预期工作。

但是，当我是另一个页面时，它会在顶部而不是锚点指向的位置加载索引页面。

我确定这是一件非常简单的事情，但我无法理解！

任何帮助表示赞赏！

我的路由器索引：

export default new Router({
  scrollBehavior: function(to, from, savedPosition) {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },

  mode: 'history',
  routes: [ ... ]
})

我的导航：

<router-link @click.native="closeNav" to="/#enter">Enter</router-link>
<router-link @click.native="closeNav" to="/#prizes">Prizes</router-link>
<router-link @click.native="closeNav" to="/#faqs">FAQ</router-link>
<router-link @click.native="closeNav" to="/contactus">Contact</router-link>