标签: vue-router

从vue 1和vue-router 0.7升级了应用程序，并在控制台中收到此错误

[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。（位于组件中……[调用组件的路径]

import Vue from 'vue';
import VueResource from 'vue-resource';
import VueRouter from 'vue-router';
import gsap from 'gsap';

Vue.use( VueResource );
Vue.use( VueRouter );

window.flipster = require( 'jquery.flipster' );
window.spritespin = require('SpriteSpin');

// Main Layout Components
import Menu from './components/Menu.vue';
import Section from './components/Section.vue';

// Controller Layout Components
import ControllerMenu from './components/Controller/Menu.vue';
import ControllerSection from './components/Controller/Section.vue';

// Generic Components
import Tabs from './components/Tabs.vue';
Vue.component( 'tabs', Tabs );

import Tab from './components/Tab.vue';
Vue.component( 'tab', Tab );

import Chart from …

我试图用VueRouter实现VueJs.Home组件显示日志消息但不显示模板部分.我收到以下错误:

Home.vue

<template>
    <div class="wrap" id="app">
        <h1 class="inline">Hello There</h1>
    </div>
</template>

<script>
export default {
    name: 'app',
    data () {
        return {
            maps: []
        }
    },
    mounted() {
        console.log( 'Mounted Homepage' );
    }
}
</script>

<style lang="scss">
#app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
</style>

routes.js

import Vue from 'vue';
import Home from './components/Home.vue';
import NotFound from './components/NotFound.vue';

const routes = [
    { name: 'home', path: '/', components: Home },
    { path: '*', …

我正在使用VueJS路由器,但路由器没有加载组件.

我有About.vue和Contact.vue,只是带有要测试的标签 - 以下是它的样子:

<template>
  <div>
    <h1>Contact page. Welcome baby!</h1>
  </div>
</template>

这是带有三个路由器链路和路由器视图的App.vue.

<template>
   <div>
     <h1>Routing</h1>
     <router-link to="/">Home</router-link>
     <router-link to="/about">About</router-link>
     <router-link to="/contact">Contact</router-link>
     <router-view></router-view>
  </div>
</template>

这是main.js(导入文件的路径是正确的)

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routers} from './router'

Vue.use(VueRouter);

let router = new VueRouter({mode: 'history', routers});

new Vue({
    el:'#app',
    router,
    components: {
    'app-home' : App
    }
});

这是路由器的JS文件.router.js(路径正确)

import About from './About.vue'
import Contact from './Contact.vue'
import Home …

我使用VueJS和VueRouter开发了某种博客。因此，在管理部门中我有一个markdown编辑器，以便添加博客文章。

我的问题是：如何使router-link动态内容起作用？

目前，我只能<a href="...">foo</a>使用编辑器添加经典。而且，当呈现内容时，它是一个经典链接，因此，当访问者单击该链接时，会重新加载整个网站以显示目标链接的内容。

我认为我正在寻找的行为是将内部链接转换router-link为外部链接，并将外部链接转换为经典链接。

您有什么策略在您的项目中实现这一目标，曾经有人遇到过这个问题吗？

感谢您的建议或想法。

如果您想了解我在说什么，我在一个小型JSFiddle中解释了我的问题：http : //jsfiddle.net/El_Matella/museptre/1/

const Home = { 
  template: '<div>Home <div v-html="dynamicContent"></div></div>',
  data () {
    return {
        dynamicContent: '<router-link to="/foo">This is a dynamic link</router-link> and <a href="https://google.com" target="_blank">and this is a classic link</a>'
    }
  }
}

只会呈现经典链接

Ok, so i have the following method. Basically I am calling an API backend, posting username and password, and if those pass, in the response, the server sends me a 200 status. What I want to do, is in the response, after I get the status, run an if/else, so if the status is 200, redirect, else display an error message. every time i try to use 'this.$router.push('/any route here')',

I get an error: 'homepage.vue?3ec6:72 Uncaught (in promise) TypeError: Cannot …

在由vue-cli生成的普通Vue（不是Nuxt）项目中，*在vue-router中使用像这样工作：

export default new Router({
  routes: [
    {
      path: "/about",
      name: "about",
      component: About,
      children: [
        {
          path: "*",
          component: About
        }
      ]
    }
  ]
});

所有这些路线均有效：

• /about
• /about/123
• /about/123/abc/123/abc

有没有办法在NuxtJs中做到这一点？在Nuxt中，路由是根据文件pages夹中的文件自动生成的。但*对于文件/文件夹名称来说是无效字符。

我是vue.js的新手，并制作了此Landing组件，该组件链接到该Login组件。我要实现的是，当用户单击“登录”时，将显示登录页面。

<template>
        <div>
            <div class="landing">
                <router-link to="/login">Login</router-link>
                </div>
            </div>
        </div>
    </template>

    <script>

    export default {
        name: 'Landing',
        data: function () {
            return {
            }
        },
        methods:  {

        }
    }
    </script>

main.js：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Materials from "vue-materials"

import Routes from './routes'

const router = new VueRouter({
    routes: Routes,
    mode: 'history'
});


Vue.use(Materials)
Vue.use(VueRouter);

Vue.config.productionTip = false

new Vue({
    router: router,
  render: h => h(App)
}).$mount('#app')

App.Vue： …

我尝试在$ route.params.slug更改时使用vuejs的watch属性执行操作，但似乎不起作用...

当我单击到路由器链接时，我的$ route.params.slug实际上发生了变化，但观察者未触发...

有我的app.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Clients from './components/ClientsComponent'
import Slider from './components/SliderComponent'
import store from './store/store'

require('./bootstrap');

Vue.use(VueRouter)

const routes = [
    {path: '/references/clients', component: Slider, name: 'client'},
    {path: '/references/clients/:slug-:id', component: Slider, name: 'client.show'}
]

const router = new VueRouter({
    mode: 'history',
    routes
})

const app = new Vue({
    el: '#app',
    store: store,
    router,
    components: {
        Clients,
        Slider
    }
});

我的store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export …

有没有办法将其他数据传递给$router.push()未在路径的路径中注册为参数或查询的数据。这将使我在下一页上认识到它已通过编程导航访问，因为无法通过URL传递它。就像是：

this.$router.push({
   path: '/next-page', 
   params: {...}, 
   query: {...}, 
   moreData: {foo: 1}
})

然后在/next-page：

this.$route.moreData.foo // 1

目前，我正在使用$store来处理moreData

我正在尝试将vue路由器与Electron JS上的应用程序一起使用。如果我在渲染页面上使用路由器，则路由器工作已完成。但是我不明白如何过渡到页面，例如，-使用纸盘的“设置”。尝试进行转换时，将打开空白页。我准备了该项目的一个工作示例。仅构建项目存在此问题。在开发模式下，所有工作均正常。

这是我在github上的工作示例。请帮忙。

git clone https://github.com/DmtryJS/electron-vue-example.git
cd electron-vue-example
npm install
npm run build
and run dist\win-unpacked\example_for_stackoverflow.exe

我的main.js文件

'use strict'

import { app, protocol, BrowserWindow, Menu, ipcMain, Tray } from 'electron'
import { format as formatUrl } from 'url'
const electron = require('electron');
const path = require('path');

const isDevelopment = process.env.NODE_ENV !== 'production';

let imgBasePath;

if(isDevelopment) {
  imgBasePath = path.join('src','assets', 'img');
} else {
  imgBasePath = path.join(path.dirname(__dirname), 'extraResources', 'img');
}

let win;
let tray;
protocol.registerStandardSchemes(['app'], { secure: true })

const trayIcon …