vue-router

Watch route changes in Vue.js with Typescript

由 笑着哭i 提交于 2019-12-10 02:39:39
问题 I'd like to detect changes in my URL in a Vue.js application using TypeScript. In JavaScript this can be done as follows: watch: { '$route': { handler: 'onUrlChange', immediate: true, deep: true } }, onUrlChange(newUrl){ // Some action } How could I do the same in TypeScript? 回答1: I found the solution here: https://github.com/kaorun343/vue-property-decorator It can be done like this: @Watch('$route', { immediate: true, deep: true }) onUrlChange(newVal: any) { // Some action } 来源： https:/

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

由 江枫思渺然 提交于 2019-12-09 16:16:13
问题 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":

Dynamically inserting a CSS class to navbar based on route

由 泄露秘密 提交于 2019-12-09 12:31:35
问题 Vue 2 and Vue-Router 2. I'm trying to change the color of my app's navbar based on which route is visited. Here's what I have: main.js: import App from "../components/App.vue" const app = new Vue({ router: Router, template: '<app></app>', components: { App } }).$mount('#app') App.vue: <template> <div> <div class="navbar" v-on:class="{ colorNav: 'color-nav' }"></div> <router-view></router-view> </div> </template> <script> export default { data() { return { colorNav: false } } } </script> With

how to share data between components in VUE js (while creating list)

由 不打扰是莪最后的温柔 提交于 2019-12-09 03:58:29
问题 Could you please tell me how to share data between components in VUE js (while creating list).I have two components list components and add todo component .I want to add items in list when user click on add button .But issue is input field present in different component and list is present in different component here is my code https://plnkr.co/edit/bjsVWU6lrWdp2a2CjamQ?p=preview // Code goes here var MyComponent = Vue.extend({ template: '#todo-template', props: ['items'] }); var AddTODO =

Vue.js replace hashtags in text with <router-link>

由 馋奶兔 提交于 2019-12-09 03:43:25
I receive some text from server which may contain some hashtags and when displaying this text I would like to convert these tags with links. Example text is: "Today #weather is very nice" Following code converts the string to Today <router-link to="/tag/weather">#weather</router-link> is very nice but it is not rendered again to <a> tag. <template> <p v-html="content"/> </template> <script> export default { methods: { convertHashTags: function(str) { return str.replace(/#([\w]+)/g,'<router-link to="/tag/$1">#$1</router-link>') } }, data() { return{ content: 'Today #weather is very nice' }; } <

How to get current name of route in Vue?

由 随声附和 提交于 2019-12-08 17:13:51
问题 I want to get the name of the current route of vue-router, i have a component menu with navigation to another componentes, so i want to dispaly the name of the current route. I have this: created(){ this.currentRoute; //this.nombreRuta = this.$route.name; }, computed:{ currentRoute:{ get(){ this.nombreRuta = this.$route.name; } } } But the label of the name of the route does not change, the label only show the name of the first loaded route. Thank You EDIT: Image to show what i want 回答1: You

How to use Vue Router from Vuex state?

由 旧城冷巷雨未停 提交于 2019-12-08 16:37:41
问题 In my components I've been using: this.$router.push({ name: 'home', params: { id: this.searchText }}); To change route. I've now moved a method into my Vuex actions, and of course this.$router no longer works. Nor does Vue.router . So, how do I call router methods from the Vuex state, please? 回答1: I'm assuming vuex-router-sync won't help here as you need the router instance. Therefore although this doesn't feel ideal you could set the instance as a global within webpack, i.e. global.router =

Bind query to props with vue-router

由 ∥☆過路亽．° 提交于 2019-12-08 15:48:40
问题 Is it possible to bind query values to props declaratively? I want /my-foo?bar=my-bar to pass the props {foo: "my-foo", bar: "my-bar"} . I'm currently using something like this: export default new Router({ routes: [ { path: "/:foo", name: "Foo", component: FooPage, props: route => ({ foo: route.params.foo, bar: route.query.bar}) } ] }); And I'm looking for something like: export default new Router({ routes: [ { path: "/:foo?bar=:bar", name: "Foo", component: FooPage, props: true } ] }); I'm

VueJS 2 Router is not working when it is in production build

由 强颜欢笑 提交于 2019-12-08 13:27:08
问题 Hi people I have a working VueJS project in the development however the router stops to work in the production build. I have checked online and found this solution https://github.com/vuejs-templates/webpack-simple/issues/11 however it doesnt give me any practical information. routest.js import News from './components/frontend/News.vue' import News1 from './components/frontend/News1.vue' export const routes = [ {path: '/news', component: News1}, {path: '/', component: News} ]; My main.js'

Vue router and webpack - history mode config localhost

由 寵の児 提交于 2019-12-08 11:29:54
问题 Basically, I'm using Vue cli with webpack template and I need to use history mode in vue router, but i'm using params for a route. I read this doc: https://router.vuejs.org/en/essentials/history-mode.html and I look this thread too: Problems with vue router (history mode) in development server Vue.js - “Cannot GET /config” So I change webpack.dev.conf.js from: historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], } to
订阅 vue-router