Question

我尝试在Vue应用程序中使用命名路由。完全相同的设置在其他Vue项目中完全正常。如果我点击一个命名的路由器链接，它就会消失。如果我在浏览器中检查元素，那么该部分应该是一个空的注释。控制台没有显示任何错误。

有没有人见过类似的东西？

感谢您的帮助！

代码：

index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/views/home';
import AskQuestion from '@/components/views/ask-question';
import AddQuestion from '@/components/views/add-question';
import CompleteQuestions from '@/components/views/complete-questions';
import Survey from '@/components/views/survey';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/ask-question',
      name: 'AskQuestion',
      component: AskQuestion
    },
    {
      path: '/add-question',
      name: 'AddQuestion',
      component: AddQuestion
    },
    {
      path: '/complete-questions/:surveyId',
      name: 'CompleteQuestions',
      component: CompleteQuestions
    },
    {
      path: '/survey/:surveyId',
      name: 'Survey',
      component: Survey
    }
  ]
});

HTML

<router-link :to="{name: 'survey', params: {surveyId: survey.id}}">
   <p class="viewQuestions">View questions</p>
</router-link>

App.vue

<template>
   <div id="app">
      <navigation></navigation>
      <router-view/>
   </div>
</template>



<script>
   import Navigation from '@/components/generel/navigation';
   export default {
      name: 'app',
      components: {
          Navigation
      }
   };
</script>

<style src="./assets/scss/_general.scss" lang="scss"></style>

Answer 1

在路由配置中，设置历史记录模式，然后转到您的链接并单击该链接，然后去检查URL地址栏

attach-session

例如，如果您点击此

export default new VueRouter({
mode:'history',
......
});

你的车辙是

<router-link :to="{ name: 'home' }"> Home </router-link>

如果你的路线工作得很好，你必须在浏览器地址栏中看到这个网址

{
  path:'/home',
  component:Home,
  name:'home'
 }

VueJS命名的路线不起作用

1 个答案: