标签: vue-router

我有以下代码：

const routes = [
    { path: '/', component: FooView },
    { path: '/bar', component: BarView } 
];

const router = new VueRouter({
    routes
});

router.beforeEach(function(to, from, next) {
    if (to.path === '/bar') {
        next('/');    
    }

    next();
});

如果我省略了太多，而您需要查看与路由器相关的其他代码段，请告诉我，以便我填写。

如果我打开一个新选项卡并导航到“/#/bar”，我将成功重定向到“/#”。但是，如果我随后进入地址栏并手动添加“/#/bar”并按回车键，则不会被重定向。如果我再次在地址栏中按 Enter 键，我将被重定向。

我已经逐步完成了控制台中的代码，我看到它正在调用next('/')，我看到它push('/')在内部调用的位置，next('/')但直到我第二次在地址栏中按 Enter 键才会生效。

我试过使用，router.replace('/')但行为是一样的。我试过beforeEnter在单独的路线上使用，但行为也是一样的。

我发现讨论类似行为的两个链接是：https : //github.com/vuejs/vue-router/issues/748和https://forum.vuejs.org/t/router-beforeeach-if-manually -input-adress-in-browser-it-does-not-work/12461/2但都没有帮助我。

有人能解释一下吗？我正在尝试做的事情与 vue-router 提供的功能之间是否存在脱节？如果这种行为不是预期的，有人可以提出解决方法吗？

我刚刚开始使用 Vue，所以请原谅这个可能很愚蠢的问题。我试图避免使用 NPM。

我定义了一个组件（在路由之外进行了测试和工作，因此我省略了模板）：

var TaxonomyComponent = Vue.component('taxonomy', {
  template: '#taxonomy-component',
  data: function(){
    return {
      taxa: {
        results: [],
        count: 0
      },
      page: 1,
      page_size: 25,
      loading: true
    };
  },
  mounted(){
    this.getData();
  },
  methods:{
    getData: function(){
      var self = this;
      self.loading = false;
      self.taxa = goGetDataElsewhere();
    }
  },
  computed: {
    max_page: function(){
      return Math.ceil(this.taxa.count / this.page_size);
    }
  },
  watch:{
    page: function(){
      this.loading = true;
      this.getData();
    }
  }
});

然后我定义我的路由、路由器和应用程序：

var routes = [
        {path:'/', component: TaxonomyComponent},
    ];

    const router = …

我目前已经准备好这些路线（例如更改名称），并且在找出在子页面之间导航的方法时遇到问题。

我的计划是拥有多个带有子页面的父页面，以及一些仅通过子页面导航的导航箭头。

  {
    path: '/parentPage',
    name: 'parentPage',
    component: parentPage
    children: [
      {
        path: 'childPage1',
        name: 'childPage1',
        component: childPage1
      },
      {
        path: 'childPage2',
        name: 'childPage2',
        component: childPage2
      },
      {
        path: 'childPage3',
        name: 'childPage3',
        component: childPage3
      },     
    ]
  }

但我想知道是否有办法导航到列表中的下一个和上一个孩子？

例如，如果我在“childPage2”上，我希望能够单击一个按钮导航到下一个孩子和上一个孩子？然后一旦在“childPage3”上，由于没有 childPage4 ，只有一个选项可以导航回去？

谢谢

我想在我的 Vue.JS 应用程序中使用vue-router这样的查询参数：

http://localhost:8080/#/home/name=Alice&surname=Smith

我已将此路线添加到我的routes中router.ts：

 routes: [{
    path: '/home/name=:name&surname=:surname',
    name: 'home',
    component: Home
 }]

我还想做以下两件事：

1）我希望能够有参数name，并surname以任意顺序。例如，这两个 URL 应该导致相同的视图：

http://localhost:8080/#/home/name=Alice&surname=Smith
http://localhost:8080/#/home/surname=Smith&name=Alice

2）我希望它们也是可选的。

有没有办法做这些事情？谢谢！

我有一个加载 Vue、Vue-Router 和 Vue-Cookies 的路由器 index.js 文件，如下所示：

import Vue from 'vue';
import Router from 'vue-router';
import VueCookies from 'vue-cookies';

Vue.use(Router);
Vue.use(VueCookies);

然后我像这样定义我的所有路线：

const router = new Router({
  routes: [
    {
      path: '*',
      name: 'erorr',
      secure: false,
      component: error404,
    },
    {
      path: '/',
      name: 'Home',
      secure: false,
      component: home,
    },
    {
      path: '/clp',
      name: 'CLP',
      secure: true,
      component: clpHome,
    },
    {
      path: '/saml/login',
      name: 'samlLogin',
      secure: false,
      component: samlLogin,
    },
    {
      path: '/saml/logout',
      name: 'samlLogout',
      secure: false,
      component: samlLogout,
    },
    { …

我需要生成一个 vue-router 链接，其中包含一个以字符串键作为查询参数的数组。我希望生成的 URL 看起来像

url?param[key]=value

我需要这些类型的查询参数来匹配现有的后端基础设施，因此重命名/重构它们不是一种选择。

我尝试使用如下所示的路由器链接，但param对象只是被序列化为%5Bobject%20Object%5D. 也许有一个选项可以改变这个对象在 vue-router 中的序列化方式？

<router-link :to="{name: 'xyz', query: {param: 'value'}}">link</router-link>

有没有人有帮助的意见？谢谢 ：）

尝试使用vue-meta

我无法理解如何根据 XHR 响应设置标题。到目前为止，我有：

<script>
    export default {
        name: 'Model',
        data() {
            return {
                model: [],
            }
        },
        metaInfo: {
            title: 'Default Title',
            titleTemplate: '%s - site slogan'
        },
        methods: {
            getModels() {
                window.axios.get(`/api/${this.$route.params.manufacturer}/${this.$route.params.model}`).then((response) => {
                    this.model = response.data;
                    this.metaInfo.title = response.data.model_name; // THIS NOT WORKING
                });
            }
        },
        watch: {
            $route(to, from) {
                if ( to.name === 'model' ) {
                    this.getModels();
                }
            },
        },
        created() {
            this.getModels();
        }
    }
</script>

当我尝试设置

this.metaInfo.title = response.data.model_name;

获取错误：未捕获（承诺）TypeError：无法设置未定义的属性“title”

所以 this.metaInfo 是未定义的... …

我正在尝试使用 Vue 构建一个搜索页面，并且我希望用户在输入字段中输入的查询文本能够与 URL 中的查询参数发生反应，例如：

输入：foo 网址： http://localhost:8080/search?query=foo

如果用户继续bar在输入字段中输入，我希望将 URL 更新为http://localhost:8080/search?query=foobar而无需通过路由器导航。

使用vue-router，<router-link>提供了用于链接到路由的组件。例子：

<router-link to="/foo">Link</router-link>

但是，以下代码似乎工作相同：

<a href="#/foo">Link</a>

<router-link>仅使用有<a>什么优势？

我的错误：

./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 中的 components/main/Footer

我的组件树在下面的屏幕截图中：

我的 App.vue

<script>

import Footer from 'components/main/Footer';

export default {
  components: {Footer},
  name: 'app',
  data () {
    return {
      msg: 'Welcome to your Vue.js powered Spring Boot App'
    }
  }
}
</script>

我的路由器：

import App from './../App'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      name: 'App',
      component: App
    },

我的配置：

import App from './../App'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      name: 'App',
      component: App
    },

有任何想法吗？