标签: vue-router

如何在同一组件之间转换时触发转换？

(使用vue-router 1,有一个canReuse钩子.它在vue-router 2中不再存在.)

const Index = {
  template: `<div id="app">
    <router-link :to="{ path: '1' }">page 1</router-link> | 
    <router-link :to="{ path: '2' }">page 2</router-link>
    <router-view></router-view>
  </div>`
};

const Page = {
  template: `<transition @enter="transitionEnter" @leave="transitionLeave">
    <div>
      <p>page {{ id }}</p>
    </div>
  </transition>`,
  data() {
    return {
      id: this.$route.params.id,
    }
  },
  methods: {
    transitionEnter(el, done) {
      console.log('transitionEnter');
      done();
    },
    transitionLeave(el, done) {
      console.log('transitionLeave');
      done();
    },
    fetchData() {
      this.id = this.$route.params.id;
    }
  },
  watch: {
    '$route': 'fetchData'
  },
};

const …

我只是升级到Vue2.0，对它并不那么熟悉。

一项更改为我带来了麻烦，因为vue-router初始化[docs]已更改：

在我的情况下，初始化代码如下更改：

旧

import RootApp from './components/RootApp.vue';

router.start(RootApp, '#app')

新

import RootApp from './components/RootApp.vue';

new Vue({
  el: '#app',
  router: router,
  render: h => h(RootApp)
})

很快，我发现RootApp以这种新的方式指定会使根应用程序代码对我来说是模棱两可的。

在旧情况下，$root每个子路由元素的元素产生RootApp实例，而在新情况下，它产生另一个包含RootApp实例作为其唯一子元素的组件。

因此，这很麻烦，是否有任何方法可以RootApp在Vue2中创建根节点？

或者我想，有什么办法可以创建一个如下所示的Vue实例（但是尝试时失败了）：

# Failed code to tell what I want

import RootApp from './component/RootApp.vue';
new RootApp({
    el: '#app',
    router: router,
});

我一直在努力使我的vuejs应用程序与SSR功能良好,但我的所有尝试都失败了.我真的需要帮助.

请注意,我使用普通的js文件,而不是使用es6的.vue文件,并且需要使用webpack require函数的html模板.

该应用程序在开发模式下工作正常,但是,当我使用'vue-server-renderer'开始执行它并转到任何路由时,将抛出此错误:

错误:在组件中未定义渲染函数或模板:在presentationComponent(/ Users/salaahassi /)上的normalizeRender(/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6015:13)中匿名dev/vue/magicum/node_modules/vue-server-renderer/build.js:6081:3)在renderNode(/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6065: 7)在渲染(/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6257:5)RenderStream.render(/ Users/salaahassi/dev/vue/magicum/node_modules /) vue-server-renderer/build.js:6312:9)RenderStream.tryRender(/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:96:12)在RenderStream._read (/ Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:125:12)在RenderStream.Readable.read(_stream_readable.js:348:10)的resume_(_ stream_readable.js: 737:12)在_combinedTickCallback(internal/process/next_tick.js:74:11)

此外,当我在我的浏览器上禁用javascript时,即使主页也会消失(当然这是因为它不能通过SSR工作).

这是我的webpack:

var path = require('path')
var webpack = require('webpack')
var HTMLPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCSS = new ExtractTextPlugin('styles.css');

var options = {
  // entry: './entry.client.js',
  entry: {
    app: './entry.client.js',
    vendor: [
      'vue',
      'vue-router',
      'vuex',
      'vuex-router-sync',
      'moment',
      'axios'
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: '[name].[hash].js',
  },
  module: {
    noParse: /es6-promise\.js$/, // avoid webpack …

我使用vue-cliwebpack模板生成了一个vue应用程序，并使用本指南将其部署到了heroku 。我能够毫无问题地运行它，但是当我刷新页面或直接访问子路由时，它失败了。

server.js

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')
app = express()
app.use(serveStatic(__dirname))
var port = process.env.PORT || 5000
app.listen(port)
console.log('server started '+ port)

router.js

我的Vue路由器配置

export default new Router({ mode: 'history', routes })

如何将Vue.js作用域样式应用于通过加载的组件<view-router>.

这是我的代码:

<template>
  <div id="admin">
    <router-view></router-view>
  </div>
</template>

<style lang="scss" scoped>
#admin {
  .actions {
    display: none;
    span {
      cursor: pointer;
    }
  }
}
</style>

当我访问/posts一个名为的组件Posts将被加载时,在这个组件里面我有一个

<div class="actions">
  some content
</div>

问题是定义的样式#admin不适用于.action元素.没有作用域时,这很好用.#admin组件样式的问题出现了scoped.

在将.actions样式保留在admin组件范围样式标记内时,有没有办法做到这一点？

为了提供一些背景信息，我有一个使用vue-router和vuex的vuejs应用程序。

• app.vue 引导代码
• foo.vue 在路线上渲染的某些组件 /foo
• bar.vue 在路线上渲染的某些组件 /bar

当应用程序启动时，我需要同步从设备存储读取的状态。由于这是异步操作，因此将其包装在上vue-action并调用app.vue。

在/foo安装组件时输入路线时，$store尚未从设备存储器中更新

所有组件如何确保在安装之前进行初始化？

如果我有一个带有vuetify对话框的vue模板（但实际上是任何对话框），如何使用它来确认在vue-router的beforeRouteLeave方法中导航离开该页面？

dialogTest.vue：

<template>
    <v-container>
        <v-layout>
            <v-dialog v-model="dialog" max-width="290" ref="popup">
                <v-card>
                    <v-card-title class="headline">Are you sure you wish to leave this page?</v-card-title>
                    <v-card-text>Better think long and hard.</v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="primary darken-1" flat="flat" @click.native="dialog = false">Nah</v-btn>
                        <v-btn color="primary darken-1" flat="flat" @click.native="dialog = false">Yah</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-layout>
    </v-container>
</template>

<script src="./dialogTest.ts"></script>

dialogTest.ts：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

Component.registerHooks([
    'beforeRouteLeave'
]);

@Component
export default class DialogTestComponent extends Vue {

    dialog: boolean = false;

    beforeRouteLeave(to: Object, from: Object, next: …

我有一个像这样的Vue路由器:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Inbox',
      component: Inbox
    }]
})

在主app.vue中我:

  <div id="app">
    <main>
      <keep-alive include="Inbox">
        <router-view></router-view>
      </keep-alive>
    </main>
  </div>

它不起作用,但如果我删除它包含它(在所有路由中).只有保持活动才能在收件箱组件中缺少什么？

我正在使用Vue js中的路由器.我通过为每个链接添加样式router-link-active和exact属性来显示Navbar中的当前链接<router-link>.它工作正常.

但现在我正在尝试使用类is-active(Bulma CSS)来完成它.我怎样才能做到这一点 ？.

码

<a class="navbar-item is-active">
      <router-link to="/" exact>Home</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/about" exact>About</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/information" exact>Information</router-link>
    </a>

任何逻辑和解决方案？请帮我.

我想遍历我的routes使用v-for，以便<router-link>在本template节中动态生成。

目前，我不知道如何解决routerPARAM，即定义main.js，在template我的部分jvds-navigation.vue组件。

这些是脚本，我在其中出现了问题时添加了注释：

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

// Import the routes file
import { routes } from './router/routes.js'

// Router
Vue.use(VueRouter)
const router = new VueRouter({
    routes,
    base: __dirname,
    mode: 'history'
})

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

应用程序

<template>
    <span id="app" class="o-root">
        <jvds-navigation class="..."></jvds-navigation>
        <router-view></router-view>
    </span>
</template> …