vue-router

webpack创建Vue项目

由 怎甘沉沦 提交于 2019-12-13 01:13:32
webpack创建Vue项目 总结 第一步 创建自己的项目目录 在项目目录中init出自己的package.json文件 npm init (npm init -y) -y的结果是不用敲enter一路选择默认的值 第二步 安装webpack 命令 npm install webpack --save-dev 安装webpack-cli 命令 npm install webpack-cli --save-dev 安装第三方的框架 清除dist文件夹重新产生的dist文件的框架 （clean-webpack-plugin） 命令 npm install clean-webpack-plugin --save-dev 生成html文件的框架（html-webpack-plugin） 命令 npm install html-webpack-plugin --save-dev es6转译es5的依赖 babel npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev babel的运行环境 命令 npm i @babel/polyfill @babel/runtime --save 在项目的根目录中创建.babelrc文件 再文件中写入 { "presets" : [

Prevent location change in browser url in VueJs

由 不羁的心 提交于 2019-12-13 00:56:32
问题 I have a vuejs application where i make rest api calls to the backend. I have define the router and navigate the different components. Now as I navigate i see the https://domain-name.com/#/abc the route path in the browser URL. I want to prevent this so that it always show https://domain-name.com/ irrespective of what path i traverse. Is there a way to do it in Vuejs or any other solution. Appreciate you help! Thanks, Rahul 回答1: You're using Vue Router, the idea of it to change routes...

vue-router change only one of the named view without affecting the others

由 人盡茶涼 提交于 2019-12-12 21:06:49
问题 I am testing with vue-router and come across this problem, what if i have two named views but i only want to change one of it without changing the default view. Currently I do it like this: const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, change: Bar, } } { path: '/foo/test1', components: { default: Foo, change: test1, } } //is it possible to do it something like this? { path: '/:foo/test1', components: { default: :foo//<--- how to keep default to whatever it

How to configure Vue router to respond to query strings?

由 泄露秘密 提交于 2019-12-12 20:59:22
问题 My router in configured as follows. It works and does what it's supposed to. import Demo1 from "../vuex_modules/demo/demo1.vue" import Demo2 from "../vuex_modules/demo/demo2.vue" export const routes = [ { path: "/demo/demo1", component: Demo1 }, { path: "/demo/demo2", component: Demo2 } ]; Now, I need to match me some query strings. When I click in one of the views routed to above, I want the object pushed to the router to look like this. export default { methods: { clicky: function(row) {

Vue+Webpack之 代码及打包优化

由 妖精的绣舞 提交于 2019-12-12 18:53:14
本文重点介绍Vue单页面应用的优化手段： 异步加载 面切换时加loading特效 点击延迟 inline manifest 逻辑代码优化 依赖包体积优化 cdn引用 Vue代码优化 异步加载 所谓的异步加载组件，其实就是组件懒加载。可以理解为：当我需要使用组件的时候才进行加载。主要包含两部分：路由配置和子组件的调用。 所以在router文件夹下 index.js 做如下配置 组件优化 由于是后台项目，所以选择element-ui框架进行后台系统搭建，所以对这个进行优化也可以减小体积，提高速度和减少加载时间，提高用户体验。 全局使用 全局引入和使用 import elementUI from 'element-ui' Vue.use(elementUI) 这种方法对于只用少量element-ui组件的情况来说，很多组件都是多余的，会无形中加大加载时间和项目打包后的体积，所以使用下面这种按需引入的方法可以有效解决这个问题。 按需引入 // 按需引入 import { Form, Button, Table, } from 'element-ui' // 按需使用 Vue.use(Form) Vue.use(Button) Vue.use(Table) 复制代码 还要一些加载和消息提示等的组件，以下写法： // 按需引入 import { Loading, Message,

How to use Vue Router in Vue 2

由 徘徊边缘 提交于 2019-12-12 10:59:26
问题 I'm learning Vue, and started of with the webpack template. The first thing I'm trying to do is to add support for Vue Router, but I've spent several hours on it now without being able to render a single route (I always end up with a blank page). Frustrating! I simply want to have a single .vue file, acting as the layout file, into which different .vue files, acting as "pages", are rendered into. Can someone tell me how to do this, please? Here's my latest failed attempt: main.js import Vue

Rest API doesn't load data quick enough before the route is shown using vue.js and vue-router

由 ぃ、小莉子 提交于 2019-12-12 10:27:08
问题 Using Vue.js with vue-router in unison with WP Rest API 2. When I switch to a route I see the div appear that should hold the content, and then the content finally loads. I also get this error: [Vue warn]: Error when evaluating expression "content.content.rendered": TypeError: Cannot read property 'rendered' of undefined The content will load on a computer eventually, even with the error, but on mobile the content doesn't show up at all. This is my method do grab a specific page. I have tried

Updating elements outside of a component

由 a 夏天 提交于 2019-12-12 05:53:55
问题 I'm using Laravel and Vue to create an app which has a master layout.blade file and then I'm using component and the VueRouter. What I can't get my head around is how to achieve the following. Lets say I have two routes 'Home' and 'About' which call a dedicated home.vue and about.vue component files. What if, outside of the component I have a H1 for the heading of the page contained in the master page. How would I go about updating that? Do I do it in route.js or the component file? 回答1: The

VueJS - sub-nav components outside of router-view?

由 心不动则不痛 提交于 2019-12-12 05:39:57
问题 I have a site layout using Bootstrap as follows (and it needs to stay like this): <div class='row'> <div class='col-md-2'> <main-nav-component></main-nav-component> <sub-nav-component></sub-nav-component> <!-- Problem Area --> </div> <div class='col-md-10'> <router-view></router-view> <!-- MAIN CONTENT SECTION --> </div> </div> This gives me two columns across the whole site: A navigation column on the left A "contents" column on the right Various pages (but not all) that are displayed in the

[Vue warn]: Cannot find element — empty container is rendered

由 心不动则不痛 提交于 2019-12-12 04:36:52
问题 I am trying to learn Vue 2 framework and I am stuck with this error. I have the following scripts responsible for the functionality of my application: main.js import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import App from './App.vue' import Posts from './components/Posts.vue' import Routes from './routes/routes' Vue.config.productionTip = false Vue.use(VueRouter) Vue.use(VueResource) const router = new VueRouter({ routes: Routes }) new Vue({ el
订阅 vue-router