vue-router

When using Vue Router with routes like /foo/:val you have to add a watcher to react for parameter changes . That results in somewhat annoying duplicate code in all views that have parameters in the URL. This could look like the following example: export default { // [...] created() { doSomething.call(this); }, watch: { '$route' () { doSomething.call(this); } }, } function doSomething() { // e.g. request API, assign view properties, ... } Is there any other way to overcome that? Can the handlers for created and $route changes be combined? Can the reuse of the component be disabled so that the

要使用vue-router,首先需要在项目根目录的package.json中添加依赖 接着使用npm install 下载对应的依赖包，当然也可以直接 npm install vue-router --save-dev 安装 引入vue-router 来源： https://www.cnblogs.com/rmty/p/11420131.html

I'm developing a website with vuejs and at this moment I'm in a trouble, I need get the url query (page) from a url like this websitename.com/user/?page=1 but the this.$router.query.page get me a error (Uncaught TypeError: Cannot read property 'page' of undefined) someone know something about this problem and can help me? PS: I can set the query page using this.$router.push({name: 'userIndex', query: { page: '123' } }); and I can get the url normal params like the userID -> (websitename.com/user/:userId | websitename.com/user/1) but I can't get any query parameter I think you can simple call

1、安装vue-cli 打开cmd命令 npm install -g vue-cli npm install -g webpack 然后进行安装，安装成功后你的node-v10.15.3-win-x64目录下的node_global会多出 vue vue.cmd vue-init vue-init.cmd vue-list vue-list.cmd的文件 安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。 然后再输入vue init webpack spa1 spa1即为项目名，项目名不能用中文或大写字母，然后终端会出现“一问一答”模式 1.Project name：项目名，默认是输入时的那个名称spa1，直接回车 2.Project description：项目描述，直接回车 3.Author：作者，随便填或直接回车 4.Vue build：选择题，一般选第一个 4.1Runtime + Compiler: recommended for most users//运行加编译，官方推荐，就选它了 4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue

I have a Vue 2 project that has many (50+) single-file components . I use Vue-Router for routing and Vuex for state. There is a file, called helpers.js , that contains a bunch of general-purpose functions, such as capitalizing the first letter of a string. This file looks like this: export default { capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1); } } My main.js file initializes the app: import Vue from 'vue' import VueResource from "vue-resource" import store from "./store" import Router from "./router" import App from "./components/App.vue" Vue.use(VueResource)

I'd like to make a redirection in Vue.js similar to the vanilla javascript window.location.href = 'some_url' How could I achieve this in Vue.js? Jeff If you are using vue-router , you should use router.go(path) to navigate to any particular route. The router can be accessed from within a component using this.$router . Otherwise, window.location.href = 'some url'; works fine for non single-page apps. EDIT : router.go() changed in VueJS 2.0. You can use router.push({ name: "yourroutename"}) or just router.push("yourroutename") now to redirect. https://router.vuejs.org/guide/essentials/named

I trying to setup deep nesting like below, and I am kinda sure about we cannot use exact in router-link for nested routes. <div id="app"> <nav class="nav nav-main"> <router-link exact to="/" class="nav-link" activeClass="active">Dashboard</router-link> <router-link to="/projects" class="nav-link" activeClass="active">Projects</router-link> </nav> <div class="parent-content"> <h4>Content for Parent goes here</h4> </div> <router-view> <nav class="nav nav-main"> <router-link :to="'/projects/' + $route.params.projectId" class="nav-link" activeClass="active">Deals</router-link> <router-link :to="'

vue-router有两种模式,一种是哈希(Hash)模式另一种是历史(Histroy)模式,而历史模式在利用ngnix打包部署上线时,需要一些额外的操作 假设你的Ngjnix长这样: ... location / { root /data/nginx/html; index index.html index.htm; } ... 在这种配置方式下,正常访问主页是没有问题的,页面的跳转也很正常,但只要在非主页的地方刷新页面,就会立刻404 此时,我们只要在Ngnix配置内加一小行就可以了,修改如下: ... location / { root /data/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html } ... 这行配置的作用是将你的错误页面重定向至/index.html,后面的路由跳转,就由VUE-router来处理了. 来源： https://www.cnblogs.com/guantou-knight/p/11403801.html

1、 前端路由 前端路由在很多开源的 js 类库框架中都得到支持，如 AngularJS 、 Backbone 、 Vue.js 等等。 前端路由和后端路由原理一样，是让所有的交互和展示在一个页面运行，以达到减少服务器请求，提高客户体验的目的，越来越多的网站特别是 web 应用都用到了前端路由 点击链接1 ，下面内容区出现页面 1 的内容，整个页面不整体刷新，只是局部刷新。 这个类似于 ajax 类似，但是又是不同的， ajax 是发送 http 请求到后台。 前端路由只是在前台处理，跟后台没关系。 2、 后端路由 3、 Vue.js 路由介绍 Vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。 Vue.js 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。在单页面应用中，路径之间的切换，也就是组件的切换。 4、 Vue.js 路由案例 4.1. 引入 vue-router.js https://unpkg.com/vue-router/dist/vue-router.js 4.2. 创建组件构造器 创建两个组件构造器 Home 和 About 4.3. 映射路由 4.4. 定义路由链接 4.5. 运行路由 来源： https://www.cnblogs.com/schangxiang/p