vue-router | 易学教程

Accessing Vuex state when defining Vue-Router routes

阅读更多关于 Accessing Vuex state when defining Vue-Router routes

问题 I have the following Vuex store (main.js): import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //init store const store = new Vuex.Store({ state: { globalError: '', user: { authenticated: false } }, mutations: { setGlobalError (state, error) { state.globalError = error } } }) //init app const app = new Vue({ router: Router, store, template: '<app></app>', components: { App } }).$mount('#app') I also have the following routes defined for Vue-Router (routes.js): import Vue from 'vue'

Vue常见问题总结

阅读更多关于 Vue常见问题总结

1、active-class是哪个组件的属性？嵌套路由怎么定义？答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？答：在router目录下的index.js文件中，对path属性加上 /:id。使用router对象的params.id 3、vue-router有哪几种导航钩子？答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件 4、scss是什么？安装使用的步骤是？有哪几大特性？答：预处理css，把css当前函数编写，定义变量,嵌套。先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader 4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？答：css的预编译。使用步骤：第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）第二步：在build目录找到webpack.base.config.js

Vue路由vue-router

阅读更多关于 Vue路由vue-router

router介绍 router是一个被vue官方收纳的插件，在我们项目建完之后就会出现一个 router.js文件，我们只需要在这个文件下配置相应的路由，就可以实现 url与页面一一对应的关系 router配置 import About from "./views/About"; //先导入 Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/about', // url的路径 name: 'about', // url对应的名字，可以用作反向解析 component: About // template解析 }, { path: '/goods', name: 'goods', component: () => import('@/views/Goods.vue') //直接通过这种导入返回给component } ] 上面的两种导入方式，建议使用第一种 router使用下面所有使用的路由均用上面配置的路由基本使用 1. 首先在根组件下面配置<router-view /> <template> <div id="app"> <router-view/>

vuex和vue-router全家桶

阅读更多关于 vuex和vue-router全家桶

vuex 关键词：state，getters，actions，mutations，store。 state为状态的参数。 getters为获取器，用于过滤的方法获取参数。 mutations是改变状态参数的函数，但是不能直接被调用，需要对应的 store.commit （可以额外传参数）。 actions不是直接修改状态，而是基于mutations，可以执行异步处理 store更像一个容器，装着以上的所有函数和参数，最后需要注入到Vue的实例当中。 2.0 特性--辅助函数辅助函数j就是可用可不用。如果你用了，它就会提高代码编写效率的。 mapState mapGetter mapMutation 举个例子，如果不用辅助函数 mapState ， computed: { count () { return this.$store.state.count } } 使用辅助函数 mapState ， computed: mapState([ // 映射 this.count 为 store.state.count 'count' ]) 如果不用辅助函数 mapGetter computed: { doneTodosCount () { return this.$store.getters.doneTodosCount } } 使用辅助函数 mapGetter computed: {

Can we make vue.js application without .vue extension component and webpack?

阅读更多关于 Can we make vue.js application without .vue extension component and webpack?

问题 Note: Can we write vue.js large application without using any compiler for code like currently i see all example use webpack now to make vue.js code compatible for browser . I want make vue.js application without webpack and without using .vue extension. Is it possible? if it is possible, can you provide a link or give sample how to use routing in that case. As we make component in .vue extension can be make component in .js extension and use application as we do in angular 1 where we can

vue面试题

阅读更多关于 vue面试题

要招一个会vue的开发者：作为面试官的你，你还会每次都只是问这些老土的问题吗？你对MVVM的理解是什么？你知道什么是双向绑定吗？你了解它的原理吗？说说vue的生命周期有哪些？组件通讯有哪些？你用过vuex吗？ ... 作为面试者的你，在网上搜索下“vue面试题及答案”，看完后你是不是觉得：自己掌握了武林秘籍？能忽悠住面试官了？我熟练掌握vue了？记一次印象深刻的面试面试过很多小伙伴（要招会vue的开发者），没工作经验的，5年工作经验的，甚至10多年工作经验的...让我印象最深，也觉得最为经典的一个面试：有一天，来了一位5年前端工作经验的小伙子，在很多项目中使用过vue的面试者，故事就从这里开始了：（开篇省略N多对话……）我：看你简历上说你在项目中有用到过vue对吗？小伙子：有啊，我们项目中就有用到过…… 我：你认为你对vue的理解到什么程度？（对自我的认知）小伙子：做过很多项目，基本上都了解了，很熟练我：不错，那我问下你 “vue为什么要求组件模板只能有一个根元素？” 小伙子：恩……没在意过我：没关系，那 “你了解vue的diff算法吗？” 小伙子：恩……没用到过我：没事，那我再问下你，“在.vue文件中style是必须的吗？那script是必须的吗？为什么？” 小伙子：恩……(此时小伙子有点着急了，说) 小伙子

How to pass a value from Vue data to href?

阅读更多关于 How to pass a value from Vue data to href?

问题 I'm trying to do something like this: <div v-for="r in rentals"> <a bind-href="'/job/'r.id"> {{ r.job_title }} </a> </div> I can't figure out how to add the value of r.id to the end of the href attribute so that I can make an API call. Any suggestions? 回答1: You need to use v-bind: or its alias : . For example, <a v-bind:href="'/job/'+ r.id"> or <a :href="'/job/' + r.id"> 回答2: Or you can do that with ES6 template literal: <a :href="`/job/${r.id}`" 回答3: If you want to display links coming from

Vue Router return 404 when revisit to the url

阅读更多关于 Vue Router return 404 when revisit to the url

问题 I just enable Vue router history mode. And it work fine when I visit to vue routing via v-href or href. But, when I try to refresh that page or go directly from browser address bar, it just return 404. Is there any option to accept refresh/revisit to that url? The following is my Vue router configuration var router = new VueRouter({ hashbang: false, history: true, mode: 'html5', linkActiveClass: "active", root: '/user' }); 回答1: By refreshing the page you are making a request to the server

How to remove hashbang from url?

阅读更多关于 How to remove hashbang from url?

问题 How to remove hashbang #! from url? I found option to disable hashbang in vue router documentation ( http://vuejs.github.io/vue-router/en/options.html ) but this option removes #! and just put # Is there any way to have clean url? Example: NOT: #!/home BUT: /home 回答1: You'd actually just want to set mode to 'history' . const router = new VueRouter({ mode: 'history' }) Make sure your server is configured to handle these links, though. https://router.vuejs.org/guide/essentials/history-mode.html

vue中的路由使用

阅读更多关于 vue中的路由使用

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。路由中有三个基本的概念 route, routes, router。 1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。 2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}] 3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

订阅 vue-router