vue-router

vuejs application with different layouts (e.g. login layout, page layout, signup etc.)

由 瘦欲@ 提交于 2019-12-04 07:33:44
问题 I generated a project using vue-cli. I see project has one App.vue which is kinda main layout of the app - if I'm not mistaken. Here I put my basic HTML layout and <router-view></router-view> . Now the issue is that I need completely different layout for login (different wrappers , body has different classes) but I can't change it since App.vue has template which is kinda "fixed" as a layout. How to approach this issue? Is there recommended way? Should I create new component that represents

vue-router动态添加路由报错

由 这一生的挚爱 提交于 2019-12-04 06:26:17
【报错】 Uncaught Error: [vue-router] route config "component" for path: /home cannot be a string id. Use an actual component instead 运行时不报错，但是页面显示空白。打开控制台显示下图： . 【报错解析】 路径/home的[vue router]route config“component”不能是字符串id 请改用实际的组件 在以下代码中定位，可以看到是组件的错误component export default new Router({ routes: [ { path:'/', redirect:'/home' }, { path:'/home', component:'Home' }, { path:'/cart', component:'Cart' }, { path:'/profile', component:'Profile' } ] }) 发现 component:'Profile' 不能加引号 【解决方法】 去掉引号（component:Profile）后界面即可正常显示。 来源： https://www.cnblogs.com/catherine-m/p/11837504.html

Refresing a vue app gives: Cannot GET /path

由 主宰稳场 提交于 2019-12-04 05:47:46
I have a simple webpack template vue app, and let's say I have a page with http://localhost:8080/profile On my local page, I can go from any page to /profile and even once on /profile I can refresh/reload the page and I get no error. But I deployed my app on heroku and even though I can navigate from any page to any other, but if I am for example on /profile page and I hit refresh i get Cannot GET /statement what could be the problem? You trying to use history mode of router without backend. For getting things working, you may use Express JS. Previous answer is not working for me and i write

Detect Back Button in Navigation Guards of Vue-Router

由 南楼画角 提交于 2019-12-04 05:40:14
问题 How the route is changed, matters for my case. So, I want to catch when the route is changed by a back button of browser or gsm. This is what I have: router.beforeEach((to, from, next) => { if ( /* IsItABackButton && */ from.meta.someLogica) { next(false) return '' } next() }) Is there some built-in solutions that I can use instead of IsItABackButton comment? Vue-router itself hasn't I guess but any workaround could also work here. Or would there be another way preferred to recognize it? 回答1:

Vue js;Vue router is not constructor error in simple route

由 谁说我不能喝 提交于 2019-12-04 05:30:00
I am trying to implement simple routing with official route library. Here is my app.js window.Vue = require('vue'); window.VueRouter= require('vue-router'); Vue.use(VueRouter); const vt=Vue.component('example', require('./components/Example.vue')); const router = new VueRouter({ routes:[ { path:'/test', component:vt } ] }) const app = new Vue({ el: '#app', router:router }); But i got an error app.js:11256 Uncaught TypeError: VueRouter is not a constructor This answer is for any onlookers hoping for a little more insight into the problem. There are two solutions here. Solution 1: ES Module

vue.js get route name in App.vue

由 萝らか妹 提交于 2019-12-04 03:24:28
I used vue-cli with webpack to build up the vue project. Then I installed vue-meta-info to set up the seo. I want to set up the Page title with the templates and the route name. However , I cannot get the variable in router. rotuer/index.js import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@/components/HelloWorld'; Vue.use(Router); export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, }, ], }); App.vue <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App', metaInfo

Dynamic Imports for Code Splitting cause: ESLint Parsing Error 'import'

由 假装没事ソ 提交于 2019-12-04 03:16:56
I'm using the VueJS Webpack template found here: https://github.com/vuejs-templates/webpack Example Route: const AuthRoute = () => import(/* webpackChunkName: "authroute" */ './AuthRoute.vue') Example Error: [eslint] Parsing error: Unexpected token import I've followed the steps provided in Webpack's Dynamic import section, as well as Anthony Gore's blog post on how to accomplish code splitting with VueJS at the router level. More specifically, here is my setup: Package.json ... "babel-core": "^6.22.1", "babel-eslint": "^8.0.3", "babel-jest": "^21.2.0", "babel-loader": "^7.1.1", "babel-plugin

[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly?

由 回眸只為那壹抹淺笑 提交于 2019-12-04 03:05:39
问题 I use Vue 2 in CLI mode with webpack-simple. I have following files: main.js: import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import Routes from './routes' Vue.use('VueRouter'); const router = new VueRouter({ routes: Routes }) new Vue({ el: '#app', render: h => h(App), router: router, }) App.vue: <template> <div> <router-view></router-view> </div> </template> <script> import Loader from './Loader.vue' export default { name: 'app', } </script> <style lang=

Firebase Auth and Vue-router

由 非 Y 不嫁゛ 提交于 2019-12-04 02:12:01
I'm trying to authenticate a Vue.js app using firebase. I have an issue where if trying to access a login-protected URL directly while logged in, the router will load and check for auth state before firebase.js has time to return the auth response. This results in the user being bounced to the login page (while they are already logged in). How do I delay vue-router navigation until auth state has been retrieved from firebase? I can see that firebase stores the auth data in localStorage, would it be safe to check if that exists as a preliminary authentication check? Ideally the end result would

Vue 性能优化篇 (二、第三方CDN加速)

由 情到浓时终转凉″ 提交于 2019-12-03 18:09:17
一、引入第三方CDN资源，网址： http://www.bootcdn.cn/ （1）vue最外层index.html 文件引入资源文件引入如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="renderer" content="webkit"> <link rel="shortcut icon" href="static/favicon.ico"/> <title></title> <link href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com
订阅 vue-router