标签: vue-router

我有一个Vue组件,其中有一个名为'title'的道具,例如:

<script>
export default {
  props: ['title'],
  data() {
    return {
    }
  }
}
</script>

在某个操作完成后,我以编程方式导航到组件.有没有办法以编程方式路由用户,同时还设置道具值？我知道你可以创建这样的链接:

<router-link to="/foo" title="example title">link</router-link>

但是,有没有办法做以下事情？

this.$router.push({ path: '/foo', title: 'test title' })

编辑:

如我所知,我已将路线更改为以下内容:

   {
      path: '/i/:imageID',
      component: Image,
      props: true
    }

并导航到以下内容:

this.$router.push({ path: '/i/15', params: {title: 'test title' }})

但是,我的图像组件(模板 - 见下文)仍然没有显示任何标题.

<h1>{{ title}}</h1>

有什么可能导致问题吗？

我必须使用许多不同的模块(如todo模块,文档模块和管理员用户的大用户管理模块)进行Web应用.总页数> 100.并且每个用户的模块访问权限不同.

我正在使用Laravel和Vue-router.

但这样做的最佳做法是什么？

1. 创建一个SPA应用程序,一个大的vue-router用于所有东西？
2. 对于每个模块一个自己的单个"SPA"(有自己的vue-router)？
3. 还是另一个建议......？

我可以像这样设置滚动行为到Vue.js路由器:

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'index',
            component: Main
        },
        {
            path: '/some-path',
            name: 'some-path',
            component: SomePath
        }
    ],
    scrollBehavior() {
        return {x: 0, y: 0}
    }
})

当您单击某个不是最新的页面的链接时,这非常有效.当我点击已经渲染的链接时,即在页脚中,没有任何反应.Vue Router假设没有状态转换.在这种情况下向上滚动的首选方法是什么？

我正在使用 pinia 和 vue-router 4.x ，但我在商店中使用它们时遇到问题。每个都独立工作，但不能一起工作。

如果我使用

import router from '../router'

路由器可以工作，但 pinia 失败并出现错误

Uncaught ReferenceError: Cannot access 'useAuthStore' before initialization
at axiosroot.ts

@line let authStore = useAuthStore(pinia);

//这里是axiosroot.ts

import axios from "axios";
import {useAuthStore} from '../stores/auth-store'
import { createPinia } from "pinia";
 const pinia=createPinia();
let authStore = useAuthStore(pinia);
const url = "http://127.0.0.1:8000/api";
const   myToken =authStore.getToken;
export default axios.create({
  url,
  headers:{"Accept":"application/json"},
  
});

当我从 vue-router 导入路由器时useRouter未定义

import {useRouter} from 'vue-router'
const router =useRouter();

错误

Uncaught TypeError: Cannot read properties …

如何创建一个类似于vue-router的组件router-link,我通过props获取标签来呈现我的模板？

<my-component tag="ul">
</my-component>

会呈现:

<ul>
  anything inside my-component
</ul>

我正在使用 Vue 3，包括 Composition API，另外还使用 Pinia 作为状态管理。

在选项 API 中，有一个方法 beforeRouteEnter，该方法内置于组件本身中。不幸的是，这个方法在组合 API 中不存在。这里，本来应该在 beforeRouteEnter 方法中的代码被直接写入 setup 方法中。但是，这意味着首先加载并显示组件，然后执行代码，如果检查失败，则组件将被重定向到错误页面等。

我的想法是直接在路由的 beforeEnter 方法中的路由配置中进行检查。但是，我无法访问 Pinia Store，尽管它之前在 main.js 中调用过，但它似乎尚未初始化。

控制台日志

Uncaught Error: []: getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.

路由器.js

import { useProcessStore } from "@/store/process";

const routes: Array<RouteRecordRaw> = [
{
    path: "/processes/:id",
    name: "ProcessView",
    component: loadView("ProcessView", "processes/"),
    beforeEnter: () => {
      const processStore = useProcessStore();
      console.log(processStore); …

我是vuejs的新手,我正在用vue开展我的第一个项目.我只是想知道如果找不到请求的URL,我将如何路由到我的404.vue组件.

任何的想法？

我正在使用Vue.js和vue-cli.我选择了webpack设置.我连接了main.js文件进行路由,但我找不到全局注册组件的方法.

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Companies from './components/pages/Companies'
import Income from './components/pages/Income'
import Login from './components/pages/Login'

Vue.use(VueRouter)

let router = new VueRouter()

router.map({
  '/companies': {
    component: Companies
  },
  '/income': {
    component: Income
  },
  'login': {
    component: Login
  }
})

router.start(App, 'body')

App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
import {Auth} from './lib/api'
import Loader from './components/Loader'

export default {
  components: {
    Loader
  },
  ready () {
    Auth.isLoggedIn().then(
      (response) => { …

我已经使用webpack的代码拆分功能将我的应用程序拆分为多个块,以便在用户访问我的网页时不会下载整个应用程序包.

某些路由所需的块可能相当大,并且可能需要花费相当多的时间来下载.这很好,除非用户在单击内部链接时不知道页面实际上正在加载,所以我需要以某种方式显示加载动画或其他东西.

我的路由器配置如下:

[
  {
    path: '/',
    component: () => import(/* webpackChunkName: 'landing' */ './landing.vue'),
  },
  {
    path: '/foo',
    component: () => import(/* webpackChunkName: 'main' */ './foo.vue'),
  },
  {
    path: '/bar',
    component: () => import(/* webpackChunkName: 'main' */ './bar.vue'),
  },
]

Vue.js指南中的高级异步组件显示了在解析组件时如何显示特定的"加载"组件 - 这正是我所需要的,但它也说:

请注意,当在vue-router中用作路由组件时,将忽略这些属性,因为在路由导航发生之前会先解析异步组件.

如何在vue-router中实现这一点？如果这是不可能的,延迟加载的组件对我来说几乎没用,因为它会给用户带来糟糕的体验.

我有一个使用 vue 创建的单页应用程序，导航链接都是使用router-link标签完成的。导航中有几个项目我的老板希望在导航中包含但已禁用，以便人们可以一瞥即将推出的一些功能。但是我不知道如何完全禁用路由器链接！

preventDefault什么都不@click.native.prevent="stopClick()"做，什么都不做（我尝试将它发送到一个函数以查看是否会阻止点击，但尽管阻止，它仍然只是调用该函数和路由），添加一个disabled类并设置一个pointer-events: none;什么都不做的 css 规则。我不知道还有什么可以尝试的，这是使禁用的链接成为普通文本而不是路由器链接的唯一方法吗？